Question

我正在通过任意数据点绘制一条简单的路径，我想通过在每个现有数据点的每侧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");

Answer 1

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

您可以使用刻度的invert（）函数计算要从x值加上/减去的值，该函数采用一个范围值并返回给出该范围的域值。

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

需要更新line函数以使用新数据集。有关详细信息，请参见代码段。

    
    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>

向路径添加点

1 个答案: