分组条形图

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 。