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

2023年6月28日 325次阅读

所有：

我正在尝试制作像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>

有帮助吗？谢谢

最佳答案 我想出了一个奇怪的算法来隐藏你的线的某些部分,首先你必须意识到你选择的插值算法在
analyzing the previous and next points of any t between the previous and next point之前工作,因此即使你只想生成你必须使用的路径段相同的插值算法,否则第一个/最后一个点将不具有所需的曲线

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

>渲染实体路径
>渲染此实体路径的某些部分,但使用白色笔划,使其像面具一样工作
>渲染虚线路径

履行

>首先使用所需的插值渲染实心路径
>在数据中找到所有间隙的极端情况,例如： gap([0,1,null,3,4,null,5])转换为[[1,3],[4,5]]
>计算这些点处路径的长度,这涉及到详尽的强力检查,因为没有api可以获得从路径原点到其上的确定点的长度,因为您的数据在x上增加了二进制搜索,但对于一般情况,因为我已经说过你需要进行暴力检查
>使用路径在间隙端点(视为路径长度)之间制作大量样本. 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>
点赞