d3.js - 隐藏使用曲线插值生成的 的某些部分

Question

全部:

我正在尝试制作一个像 D3 line() 这样的自定义线生成器，但是能够在数据丢失时自定义线段样式(比如使用虚线)

我不知道如何实现的一件事是它的 .interpolate() 函数。数学看起来很复杂，我想要做的只是使用现有的 D3 线函数来绘制那些连续线段并用虚线将它们连接起来，但我不知道如何生成插值线？

在下面的代码示例中，您可以看到虚线与实线不完全重叠:

var data = [];

for(var i=0; i<20; i++){
    if( i>0 && (i%4==0) ){
        data.push(null);
    }else {
        data.push({x:i, y:Math.random(i)})
    }
}

var x = d3.scale.linear();
var y = d3.scale.linear();
x.domain([0, 19])
      .range([10, 390])
y.domain([0, 1])
      .range([10, 360]);

var svg = d3.select("body")
            .append("svg")
            .attr("width", 400)
            .attr("height", 400);
var lg = svg.append("g")
            .classed("lineGroup", true);
var xg = svg.append("g")
    .classed("xaxis", true)
    .attr("transform", function(){
        return "translate(0, 380)";
    });
var line = d3.svg.line()
            .interpolate("monotone")
            .x(function(d) { return x(d.x); })
            .y(function(d) { return y(d.y); });
line.defined(function(d) { return d!=null; });

lg.append("path")
    .classed("shadowline", true)
    .attr("d", function(){
        return line(data.filter(function(d){return d!=null;}));
    })
    .style("fill", "none")
    .style("stroke", "steelblue")
    .style("stroke-width", "3px")
    .attr("stroke-dasharray", "5,5");
lg.append("path")
    .attr("d", function(){
        return line(data);
    })
    .style("fill", "none")
    .style("stroke", "steelblue")
    .style("stroke-width", "3px");
lg.selectAll("circle")
    .data(data.filter(function(d){return d!=null;}))
    .enter()
    .append("circle")
    .style("fill", "orange")
    .style("stroke", "red")
    .style("stroke-width", "3px")
    .attr("r",5)
    .attr("cx", function(d){return x(d.x);})
    .attr("cy", function(d){return y(d.y);})
var xAxis = d3.svg.axis()
                  .scale(x)
                  .orient("bottom");
xg.call(xAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

有什么帮助吗？谢谢

Answer 1

我想出了一个奇怪的算法来隐藏你的行的某些部分，首先你必须意识到你选择的插值算法适用于 analyzing the previous and next points of any t between the previous and next point ，因此即使您只想生成路径的一部分 必须使用相同的插值算法 否则第一个/最后一个点将没有所需的曲线

考虑到这一点，我解决您问题的算法如下

渲染实体路径

渲染此实体路径的某些部分，但使用白色笔划，使其像蒙版一样工作

渲染虚线路径

执行

首先使用所需的插值渲染实体路径

在数据中找到所有差距的极端，例如gaps([0, 1, null, 3, 4, null, 5])转换为 [[1, 3], [4, 5]]

计算这些点的路径长度，这涉及详尽的蛮力检查，因为没有 api 可以获取从路径原点到位于其上的确定点的长度，因为您的数据在 x 上增加我做了二进制搜索但对于我所说的一般情况，您需要进行蛮力检查

使用 path. getPointAtLength 在间隙端点(视为路径长度)之间制作大量样本最后为每个点集合渲染一个路径，诀窍是设置一个白色的笔划

渲染虚线路径

注意:我将插值函数更改为“基数”，这样曲线会更加引人注目，您可以看到正在运行的蒙版

var data = [];

for(var i=0; i<20; i++){
    if( i>0 && (i%4==0) ){
        data.push(null);
    }else {
        data.push({x:i, y:Math.random(i)})
    }
}

var x = d3.scale.linear();
var y = d3.scale.linear();
x.domain([0, 19])
      .range([10, 390])
y.domain([0, 1])
      .range([10, 360]);

var svg = d3.select("body")
            .append("svg")
            .attr("width", 400)
            .attr("height", 400);
var lg = svg.append("g")
            .classed("lineGroup", true);
var xg = svg.append("g")
    .classed("xaxis", true)
    .attr("transform", function(){
        return "translate(0, 380)";
    });
var line = d3.svg.line()
            .interpolate("cardinal")
            .x(function(d) { return x(d.x); })
            .y(function(d) { return y(d.y); });

function lineFiltered(data) {
  return line(data.filter(function (d) { return !!d }))
}

var basePath = lg.append("path")
    .attr("d", function () { return lineFiltered(data) })
    .style("fill", "none")
    .style("stroke", "steelblue")
    .style("stroke-width", "3px");

function getPathLengthAtPoint(path, point, samples) {
  // binary search to find the length of a path closest to point
  samples = samples || 100
  var lo = 0, hi = path.getTotalLength()
  var res = 0
  for (var i = 0; i < samples; i += 1) {
    var mid = lo + (hi - lo) / 2
    var pMid = path.getPointAtLength(mid)
    if (pMid.x < x(point.x)) {
      res = lo = mid
    } else {
      hi = mid
    }
  }
  return res
}

// gets endpoints from where there's a gap
// it assumes that a gap has only length 1
function getGapsEndPoints(data) {
  var j = 0
  var gaps = []
  for (var i = 0; i < data.length; i += 1) {
    if (typeof data[i] !== 'number') {
      gaps.push([data[i - 1], data[i + 1]])
    }
  }
  return gaps
}

// generates multiple points per path
function generatePaths(data, path, samples) {
  samples = samples || 50
  return data.map(function (d) {
    var lo = d[0], hi = d[1]
    var points = []
    for (var i = 0; i <= samples; i += 1) {
      var point = path.getPointAtLength(lo + i/samples * (hi - lo))
      points.push({
        x: x.invert(point.x),
        y: y.invert(point.y)
      })
    }
    return points
  })
}


var missingData = data.map(function (d) {
  return d && getPathLengthAtPoint(basePath.node(), d)
})
missingData = getGapsEndPoints(missingData)
missingData = generatePaths(missingData, basePath.node())

// finally create the mask paths using the same line generator
lg.selectAll('path.mask').data(missingData)
  .enter().append('path').classed('mask', true)
  .attr('d', lineFiltered)
  .style("fill", "none")
  .style("stroke", "white")
  .style("stroke-width", "3px")

lg.append("path")
    .classed("shadowline", true)
    .attr("d", function () { return lineFiltered(data) })
    .style("fill", "none")
    .style("stroke", "steelblue")
    .style("stroke-width", "3px")
    .attr("stroke-dasharray", "5,5");

lg.selectAll("circle")
    .data(data.filter(function(d){return d!=null;}))
    .enter()
    .append("circle")
    .style("fill", "orange")
    .style("stroke", "red")
    .style("stroke-width", "3px")
    .attr("r",5)
    .attr("cx", function(d){return x(d.x);})
    .attr("cy", function(d){return y(d.y);})
var xAxis = d3.svg.axis()
                  .scale(x)
                  .orient("bottom");
xg.call(xAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>