时间戳

首页 > 解决方案 > 向路径添加点

d3.js - 向路径添加点

问题描述

我正在通过一些任意数据点绘制一条简单的路径，我想通过在每个现有数据点的每一侧在 X 上添加偏移 20px 的点并将这些新点的值设为 0 来将其塑造成“尖峰”，然后绘制路径通过他们。

我尝试在数据中拼接点，但这不适用于线性刻度。

    var data = d3.range(13).map(function(){return Math.random()*10})
    var x = d3.scaleLinear().domain([0, 12]).range([50, w-20]);
    var y = d3.scaleLinear().domain([0, 10]).range([50, h-70]);

    var line = d3.line()
      .x(function(d,i) { return x(i);})
      .y(function(d) { return y(d);})
      .curve(d3.curveMonotoneX);

    var path = svg.append("path")
      .attr("d", line(data))
      .attr("stroke", "white")
      .attr("stroke-width", "2")
      .attr("fill", "none");

标签： d3.js

解决方案

我会预处理您的数据集以生成 x 和 y 值，这些值将绘制您需要的内容，这将与线性比例很好地配合。

您可以使用刻度的 invert() 函数从 x 值计算要加/减的值，该函数采用范围值并返回将给出该范围的域值。

然后使用该域“填充”值，创建 3 个数据点：首先，x 值减去填充值，y 值为 0。其次，原始数据点。三、x值加上padding值，y值为0

需要更新线函数以使用新数据集。有关详细信息，请参阅片段。

    
    let w = 500
    let h = 250
    let m = 50
    
    var svg = d3.select("body")
    	.append("svg")
      .attr("width", w + m + m)
      .attr("height", h + m + m)
    
    var g = svg.append("g")
    	.attr("transform", "translate("+ m + "," + m +")")

    var data = d3.range(13).map(function(){return Math.random()*10})
    
    var x = d3.scaleLinear()
    	.domain([0, 12]).range([0, w]);

    var y = d3.scaleLinear()
    	.domain([0, 10])
    	.range([h, 0]);
    
    var lineData = []
    
    //if you want 20px, calculate the value needed to +/- to the x value
    let padding = x.invert(10)
    
    data.forEach(function(d, i){
      lineData.push({"x": (i - padding), "y": 0 })
      lineData.push({"x": i, "y": d })
      lineData.push({"x": (i + padding), "y": 0 })
    })
    
    var line = d3.line()
      .x(function(d,i) { return x(d.x);})
      .y(function(d) { return y(d.y);})
      .curve(d3.curveLinear);

    var path = g.append("path")
      .attr("d", line(lineData))
 path {
      stroke: black;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round
    }
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
</body>

推荐阅读