Question

我正在尝试使用d3，javascript复制路径，这是代码的一部分

var orig = d3.select(".line"+i);
var origNode = orig.node();
var copy = d3.select(origNode.parentNode.appendChild(origNode.cloneNode(true),origNode.nextSibling))
    .attr("class","lineCopy"+d+copyIndex)
    .attr("id","lineCopy"+i)
    .style("visibility","visible");

“。line”是路径的类名，我想知道而不是复制整个路径，有没有办法只复制它的一部分？非常感谢你！

Answer 1

我不知道这是否会对您有所帮助，但您可以使用polyfill来查找路径的所有部分。

//The data for our line
var lineData = [{
  "x": 1,
  "y": 5
}, {
  "x": 20,
  "y": 20
}, {
  "x": 40,
  "y": 10
}, {
  "x": 60,
  "y": 40
}, {
  "x": 80,
  "y": 5
}, {
  "x": 100,
  "y": 60
}];

var lineFunction = d3.svg.line()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  })
  .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
  .attr("width", 200)
  .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
  .attr('class', 'test')
  .attr("d", lineFunction(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

console.log(d3.select('.test').node().getPathData());
// [Object, Object, Object, Object, Object, Object]

此数组包含一些SVG Path Mini-Language，您可以根据需要拼接数组和值。我再也不知道这是不是你想要的。

带有工作代码的plunkr：https://plnkr.co/edit/Z0wI5fNxIsI6q358ySSg?p=preview

您可以在此问题的答案中找到有关路径段的更多信息：Alternative for deprecated SVG pathSegList

如何在d3中复制部分路径

1 个答案: