Question

我正在尝试更改d3.js中已绘制路径的x比例

此外，我可以使用以下代码更改圆圈的x刻度。

end

正如您所看到的，我已使用新值更改了xTimeScale的域。然后选择所有带有类（.dot）的圆圈，并使用更改的xTimeScale重新绘制x和y。

现在我也想用这个新比例改变路径。

这是我的路径首次绘制时的代码。

var s = d3.event.selection || xTimeScale.range();

                    xTimeScale.domain(s.map(xDateScale.invert, xDateScale));

                d3.selectAll(".dot").transition().duration(10).attr("cx",function(d){ return xTimeScale(d.date); })

Answer 1

由于您只是更改了行生成器使用的比例，因此您不需要重新绑定数据（顺便说一句，我发现您没有绑定任何数据），您只需要将新比例传递给行生成器，然后更新路径的d属性。

看看这个演示。行生成器使用了一个名为xScale1的x标度：

var line = d3.line()
    .x(function(d) {
        return xScale1(d)
    })

当您单击按钮时，线生成器使用另一个比例...

line.x(function(d) {
    return xScale2(d)
})

...并且路径d属性已更新：

path.transition()
    .duration(1000)
    .attr("d", line(data));

以下是演示：

var svg = d3.select("svg");

var data = [12, 130, 45, 60, 110, 21];

var yScale = d3.scaleLinear()
  .domain(d3.extent(data))
  .range([140, 10]);

var xScale1 = d3.scalePoint()
  .domain(data)
  .range([10, 290]);

var xScale2 = d3.scalePoint()
  .domain(data.concat(d3.range(6)))
  .range([10, 290]);

var line = d3.line()
  .x(function(d) {
    return xScale1(d)
  })
  .y(function(d) {
    return yScale(d)
  })
  .curve(d3.curveBasis);

var path = svg.append("path")
  .attr("d", line(data))
  .attr("fill", "none")
  .attr("stroke", "black");

d3.select("button").on("click", function() {

  line.x(function(d) {
    return xScale2(d)
  })

  path.transition()
    .duration(1000)
    .attr("d", line(data));
})

<script src="https://d3js.org/d3.v4.min.js"></script>
<button>Click me</button>
<br>
<svg></svg>

动态改变路径的x比例d3.js

1 个答案: