d3.js图表​​中的垂直和水平参考线

时间:2017-11-09 06:05:10

标签: javascript css d3.js

我想在下面的散点图中绘制垂直和水平参考线是我的代码

var dataSum = d3.sum(data, function(d) {
  return d.volume;
})

var line = d3.line()
  .x(function(d, i) {
    return x2(d.volume) + 10;
  })
  .y(function(d, i) {
    return yScale(20);
  });

/* Horizontal line */
svg.append("path")
  .datum(data)
  .attr("d", line)
  .attr("class", "refline")
  .style("fill", "none");
/* vertical line */
svg.append("svg:line")
  .datum(data)
  .attr("x1", 266)
  .attr("y1", 10)
  .attr("x2", 266)
  .attr("y2", 350)
  .attr("class", "refline")

/* class */
.refline {
  fill: none;
  stroke: #2F4F4F;
        stroke-width: 1.0px;
        stroke-dasharray: 5,15;
    }

垂直线按预期绘制,但水平线没有显示像refline类所说的那样虚线,是否还有其他更好的方法来绘制这些线?

enter image description here

0 个答案:

没有答案