d3.js v4将折线更改为条形图

时间:2019-01-25 21:54:11

标签: d3.js svg

我正在尝试将折线图转换为条形图,无法理解在哪里出错。我正在使用d3.js v4。

此行代码显示适用于行区域的代码:

var area = d3.area()
          .x(function(d) { return   time_scale(d['timestamp'])+6.5; })
          .y0(-80+width -max_y)
          .y1(function(d) { return measure_scale(+d[field]); })
          .curve(d3.curveStep)
          ;

// append a SVG path that corresponds to the line chart
d3.select('#chart').append("path")
         .datum(neigh_data)
         .attr("class", "area")
         .attr("d", area)
         .attr('transform', 'translate(' + margin + ', -15)')

         ;

这行代码不适用于条形(看起来矩形的高度不正确,并且我没有使用颜色填充):

   d3.select('#chart').selectAll(".bar").append("path")
  .datum(neigh_data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return   time_scale(d['timestamp']); })
  .attr("y", function(d,i) { return measure_scale(+d[field]); })
  .attr("width", time_scale.bandwidth())    
  .attr("height", function (d,i) {  return height -  measure_scale(+d[field]); }) 
       ;    

我真的很乱。

0 个答案:

没有答案