9

更新：这是问题的一个例子 - http://jsfiddle.net/Hffks/2/

我正在尝试使用 D3 对折线图进行编码，并且我的线在最后被关闭，我的意思是它充当第一个点和最后一个点相同的封闭路径。我的数据采用以下 JSON 格式：

[ entityA : [ { time : 1230000,  // time since epoch
             attribute1 : 123 // numeric value 
             attribute2 : 123 // numeric value
            },
              { time : 1230010,  // time since epoch
              attribute1 : 123 // numeric value 
              attribute2 : 123 // numeric value
            } ],
  entityB : [ { ... // same format as above
  ...
 ]

我正在使用一条线的标准声明（d3.svg.line 带有用于 x 和 y 的函数）：

var line = d3.svg.line()
        .x(function(d) {
            return x_scale(d.c_date)); 
        })
        .y(function(d) { 
            return y_scale(d.total); 
        });

然后在一个遍历实体的for循环中，我附加了一个“svg：path”：

canvas.append("svg:path")
            .attr("d", line(data[entity]))

关于图表的其他一切都有效：点放置正确，每个实体有多条独立线，绘制轴等。但是，每条独立线都充当闭合路径。

提前感谢您的帮助！

4

2 回答 2

22

默认情况下会填充路径。如果你设置fill为“none”和stroke“black”，你会看到路径没有关闭，它只是看起来是。

工作小提琴：http: //jsfiddle.net/Hffks/3/

于 2012-12-03T14:51:34.360 回答
0

我的代码是这样的：

var width = 400;
var height = 400;

var svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);


//The data for our line
var lineData = [{
    "x": 1,
    "y": 5
  },
  {
    "x": 20,
    "y": 20
  },
  {
    "x": 40,
    "y": 10
  },
  {
    "x": 60,
    "y": 40
  },
  {
    "x": 80,
    "y": 5
  },
  {
    "x": 100,
    "y": 60
  }
];

//The line SVG Path we draw
var lineGraph = svg.append("path")
  .attr("d", d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .curve(d3.curveLinear)(lineData))
    //.curve(d3.curveBasis)(lineData)) //Draws smooth joints- yumuşak birleşim noktası(mafsal) çizer
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

您可以在此处查看 d3 版本 5.9.2：https ://jsfiddle.net/jsfiddleCem/u31omp5z/8/

于 2019-05-24T07:38:09.617 回答