在 D3 图上隐藏一条线

Question

I have an array of x,y points我有一个 x,y 点数组

var plot = [{x:1, y:2}, {x:3, y:4}, {x:5, y:6}, {x:6, y:7}];

which I draw using D3 on a svg canvas我在 svg 画布上使用 D3 绘制的

var lineFunc = d3.svg.line()
    .x(function(d)
    {
        return d.x;
    })
    .y(function(d)
    {
        return d.y;
    });

lineFunc(plot);

The above code will draw three lines as I defined four points.上面的代码将绘制三条线，因为我定义了四个点。 How can I hide the second line?如何隐藏第二行？

I tried adding a parameter to the points like this:我尝试向这样的点添加一个参数：

var plot = [{x:1, y:2, show:true}, {x:3, y:4, show:true}, {x:5, y:6, show:false}, {x:6, y:7, show:true}];

How can I exploit such boolean to just hide the second line?我怎样才能利用这样的布尔值来隐藏第二行？ Ie the line connecting point {3,4} with point {5,6}即连接点{3,4}和点{5,6}

I tried with我试过

var lineFunc = d3.svg.line()
            .x(function(d)
            {
                return d.x;
            })
            .y(function(d)
            {
                return d.y;
            })      
            .defined(function(d)
            {
                return d.show;
            });

but this code doesn't work for me as it hides both the left and right lines belonging to the point {5,6}但是这段代码对我不起作用，因为它隐藏了属于点{5,6}左右线

Answer 1

@LarsKotthoff's comment is probably the sane way to do this, but you could do a little path parsing... @LarsKotthoff 的评论可能是这样做的明智方法，但是您可以进行一些路径解析...

var path = svg.append("path")
  .attr("d", function(){
    // d3 generated path
    var p = lineFunc(plot);
    // find all the segments to remove
    plot.filter(function(d){
      return !d.show;
    }).forEach(function(d){
      // replace the "Lx,y" with "Mx,y" - Line to Move
      p = p.replace("L" + x(d.x) + "," + y(d.y), "M" + x(d.x) + "," + y(d.y));
    });
    return p;
  })
  .style("fill","none")
  .style("stroke","steelblue")
  .style("stroke-width", 2);

Note, this would only work if you are using linear interpolation, you'd have to modify for the others.请注意，这仅在您使用linear插值时才有效，您必须为其他人进行修改。

Some working code:一些工作代码：

 <!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <script> var svg = d3.select("body") .append("svg") .attr("width", 250) .attr("height", 250); var x = d3.scale.linear().range([0,250]).domain([0,10]); var y = d3.scale.linear().range([250,0]).domain([0,10]); var lineFunc = d3.svg.line() .x(function(d) { return x(dx); }) .y(function(d) { return y(dy); }); var plot = [{ x: 0, y: Math.random() * 10, show: true }, { x: 2, y: Math.random() * 10, show: true }, { x: 4, y: Math.random() * 10, show: true }, { x: 6, y: Math.random() * 10, show: true }, { x: 8, y: Math.random() * 10, show: false }, { x: 10, y: Math.random() * 10, show: true }]; var path = svg.append("path") .attr("d", function(){ var p = lineFunc(plot); plot.filter(function(d){ return !d.show; }).forEach(function(d){ p = p.replace("L" + x(dx) + "," + y(dy), "M" + x(dx) + "," + y(dy)); }); return p; }) .style("fill","none") .style("stroke","steelblue") .style("stroke-width", 2); </script> </body> </html>

在 D3 图上隐藏一条线

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-11-24 18:12:13

在 D3 图上隐藏一条线

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-11-24 18:12:13

解决方案1
2 已采纳 2015-11-24 18:12:13