Javascript 尝试将csv中的值输入双面水平条形图
我是d3.js新手,正在尝试创建自己的双面条形图。它所依据的图表是 每当我运行它时,都会出现一个空白屏幕,我不确定自己做错了什么Javascript 尝试将csv中的值输入双面水平条形图,javascript,d3.js,Javascript,D3.js,我是d3.js新手,正在尝试创建自己的双面条形图。它所依据的图表是 每当我运行它时,都会出现一个空白屏幕,我不确定自己做错了什么 var names = []; var total = []; var otherValue = []; d3.text("results.csv",function(data){ var data = d3.csv.parseRows(data); for( var a = 1;a <data.length;a++){ var names.push
var names = [];
var total = [];
var otherValue = [];
d3.text("results.csv",function(data){
var data = d3.csv.parseRows(data);
for( var a = 1;a <data.length;a++){
var names.push(data[a][0]);
var total.push(parseFloat(data[a][1]));
var otherValue.push(parseFloat(data[a][2]));
}
var labelArea = 160;
var chart,
width = 400,
bar_height = 20,
height = bar_height * (data.length);
var rightOffset = width + labelArea;
var chart = d3.select("body")
.append('svg')
.attr('class', 'chart')
.attr('width', labelArea + width + width)
.attr('height', height);
var xFrom = d3.scale.linear()
.domain([0, d3.max(otherValue)])
.range([0, width]);
var y = d3.scale.ordinal()
.domain(names)
.rangeBands([10, height]);
var yPosByIndex = function(d, index){ return y(index); }
chart.selectAll("rect.left")
.data(otherValue)
.enter().append("rect")
.attr("x", function(pos) { return width - xFrom(pos); })
.attr("y", yPosByIndex)
.attr("class", "left")
.attr("width", xFrom)
.attr("height", y.rangeBand());
chart.selectAll("text.leftscore")
.data(otherValue)
.enter().append("text")
.attr("x", function(d) { return width - xFrom(d); })
.attr("y", function(d, z){ return y(z) + y.rangeBand()/2; } )
.attr("dx", "20")
.attr("dy", ".36em")
.attr("text-anchor", "end")
.attr('class', 'leftscore')
.text(String);
chart.selectAll("text.name")
.data(names)
.enter().append("text")
.attr("x", (labelArea / 2) + width)
.attr("y", function(d){ return y(d) + y.rangeBand()/2; } )
.attr("dy", ".20em")
.attr("text-anchor", "middle")
.attr('class', 'name')
.text(String);
var xTo = d3.scale.linear()
.domain([0, d3.max(total)])
.range([0, width]);
chart.selectAll("rect.right")
.data(total)
.enter().append("rect")
.attr("x", rightOffset)
.attr("y", yPosByIndex)
.attr("class", "right")
.attr("width", xTo)
.attr("height", y.rangeBand());
});
chart.selectAll("text.score")
.data(total)
.enter().append("text")
.attr("x", function(d) { return xTo(d) + rightOffset; })
.attr("y", function(d,z){ return y(z) + y.rangeBand()/2; } )
.attr("dx", -5)
.attr("dy", ".36em")
.attr("text-anchor", "end")
.attr('class', 'score')
.text(String);
});
</script>
感谢您的帮助代码似乎有额外的
})
。运行此操作时,您是否在控制台上看到任何错误?@music\u ut thanking去掉了额外的括号集。控制台在var names.push(数据[a][0])的行中给出错误“Uncaught SyntaxError:Unexpected token.”代码>这确实是不正确的Javascript。您不需要该行上的var
,它后面的行也不需要。网上有一些资源可以向您简要介绍Javascript语言。我建议你读一次,它们会让你调试起来更容易。@music\u再次感谢,现在工作很好。我们将进一步查找Javascript。
ABC,140,35
DEF,164,45
GHI,89,15
JKL,56,20
MNO,20,31