Question

我正在尝试在d3中创建一个堆叠的，分组的条形图，我遇到了一个问题，我尝试添加一个穿过该组的矩形，但它为每个组生成相同的矩形（所以它为每个组重复所有组的值。）

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(d3.svg.axis().scale(x).orient('bottom').ticks(12));

    var loads = svg.selectAll(".load")
    .data(data)
    .enter()
    .append("g")
      .attr("class", "load");

    loads.selectAll(".actexit")
      .data(data, keyFunction)
      .enter()
    .append("rect")
    .attr("class", "actexit")
    .attr("width", function(d) {return x(d.returnTime) - x(d.exitTime); })
    .attr("x", function(d) { return x(d.exitTime); })
    .attr("y", function(d) { return y0(`${d.truck}${d.order}`); })
    .attr("height", function(d) { return y0.rangeBand(); })
    .attr("fill", function(d) { return 'blue'; });

    loads.selectAll(".expexit")
      .data(data, keyFunction)
      .enter()
    .append("rect")
    .attr("class", "expexit")
    .attr("width", function(d) {  console.log(d); return '2px'; })
    .attr("x", function(d) { return x(d.predictedExitTime); })
    .attr("y", function(d) { return y0(`${d.truck}${d.order}`); })
    .attr("height", function(d) { return y0.rangeBand(); })
    .attr("fill", function(d) { return 'red'; });

可在此处找到代码/演示：https://jsbin.com/heyuloz/2/edit?html,output

<svg width="960" height="500">
    <g transform="translate(40,20)">
        <g class="load">
            <rect class="actexit" width="56.94444444444457" x="626.3888888888888" y="21.42857142857143" height="192.85714285714286" fill="blue"></rect>
            <rect class="actexit" width="79.72222222222229" x="398.6111111111111" y="235.71428571428572" height="192.85714285714286" fill="blue"></rect>
            <rect class="expexit" width="2px" x="615" y="21.42857142857143" height="192.85714285714286" fill="red"></rect>
            <rect class="expexit" width="2px" x="410" y="235.71428571428572" height="192.85714285714286" fill="red"></rect>
        </g>
        <g class="load">
            <rect class="actexit" width="56.94444444444457" x="626.3888888888888" y="21.42857142857143" height="192.85714285714286" fill="blue"></rect>
            <rect class="actexit" width="79.72222222222229" x="398.6111111111111" y="235.71428571428572" height="192.85714285714286" fill="blue"></rect>
            <rect class="expexit" width="2px" x="615" y="21.42857142857143" height="192.85714285714286" fill="red"></rect>
            <rect class="expexit" width="2px" x="410" y="235.71428571428572" height="192.85714285714286" fill="red"></rect>
        </g>
    </g>
</svg>

有什么建议吗？

Answer 1

显然这是我在整个

上运行它的情况

.data(data)

而不是

.data(function(d) { return d; }).

后者不适合我，因为它是一个单独的对象而d3期待一个数组 - 所以我不得不将它改为：

.data(function(d) { return [d]; }

如何在d3条形图中分组

1 个答案: