D3线被渲染为多边形

时间:2012-12-05 09:10:17

标签: javascript d3.js data-visualization

我正在尝试使用D3来渲染线条,但是当我尝试这样做时,线条会呈现为多边形。我不知道为什么。我附上了一个屏幕截图,向您展示它的外观。 这是代码:

  // Creates a time scale using the x_extent
  // defined above
  var x_scale = d3.time.scale()
    .range([margin, width - margin])
    .domain(x_extent);

  // Creates a similarity scale using the y_extent.
  // defined above.
  var y_scale = d3.scale.linear()
    .range([height - margin, margin])
    .domain(y_extent);

  // Construct a line.
  var line = d3.svg.line()
    .x(function(d) {
      return x_scale(d.date);
    })
    .y(function(d) {
      return y_scale(d.similarity);
    });

  // Render a line.
  d3.select("svg")
    .append("path")
    .attr("d", line(data));

enter image description here

1 个答案:

答案 0 :(得分:8)

在追加路径时尝试明确设置fillstroke,即

d3.select("svg")
  .append("path")
  .attr("fill", "none")
  .attr("stroke", "black")
  .attr("d", line(data));