Question

大家好我想用d3js绘制一个分组的条形图我想通过几个教程，最后尝试使用此代码：

<script>
var data = [[10,20,30,40,50],[20,20,40,50,60]];
var canvas = d3.select("body")
    .append("svg")
    .attr("width",500)
    .attr("height",500);
    canvas.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("height",function(d){return d*10;})
        .attr("width",50)
        .attr("x",function(d,i){return i*60})
        .attr("y",function(d,i){return 500-(d*10);})
        .attr("fill","red");
</script>

有一些错误。如何设置分组图表的数据..

Answer 1

要回答您的第一个问题，您使用的错误来自您选择的数据结构。由于.data(data).enter()子句的工作方式，会发生错误。

整个子句将隐式迭代outter数组中第一级的元素。这是传递给

的每个元素d

.attr("height",function(d){...) .attr("x",function(d)...) and .attr("y",function(d)...)是一个数组。因此，每个函数的内部都使用数组上的常量操作，这没有任何意义。在javascript中澄清d * [1,2,3,4]的含义是什么？

回答你的第二个问题。如果要创建分组条形图，请查看以下链接：http://bl.ocks.org/mbostock/3887051。

分组条形图

1 个答案: