Question

这是bar chart example这里是PLUNKER
这是multi line series chart example，这里是PLUNKER

如何根据上面给出的多线系列图表示例和条形图示例创建多条形图。所以基本上我只想将多线系列图转换成多条系列图。

我认为这是我确定需要更改的代码：

var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return z(d.id); });

我到目前为止的尝试是：我希望有一个条形函数而不是线条，但我能找到的最好的是区域，这没有什么区别。 PLUNKER

var bar_chart = d3.area()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });


  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return bar_chart(d.values); })
      .style("stroke", function(d) { return z(d.id); });

** [＃2] **的另一种尝试是尝试以这样的方式写出它来绘制多条形图。

  svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

EDIT1

在我上面的尝试2的基础上，我添加了以下代码。至少这对我来说是一个障碍。现在我只需要研究如何根据数据集进行操作。 PLUNKER here.

  city.append("rect")
        .attr("class", "bar3")
        .attr("data-legend",function(d) { return d.name})
        .attr("x", function(d) { console.log(d); return 19; })
        .attr("width", 158)
        .attr("y", function(d) { console.log(d.value); return 360; })
        .attr("height", function(d) { return 90; });

EDIT2

我尝试将x轴中的值交换到lengend，反之亦然。 https://plnkr.co/edit/MFP1MK3ePGnwi6PvC9V4?p=preview
有些人只是在玩我，试着更好地理解它 https://plnkr.co/edit/MFP1MK3ePGnwi6PvC9V4?p=preview

如何在d3.js中创建多条形图

EDIT1

EDIT2

0 个答案: