how to copy part of a path in d3

Question

I am trying to copy a path using d3, javascript, this is part of the code

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" is the path's class name, I am wondering instead of copying the whole path, is there a way to just copy part of it? Thank you very much!

score 0 · Answer 1 · edited May 23 '17 at 12:15

I don't know if this will help you but you may be able to use a polyfill to find all the segments of your path.

//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]

This array contains some SVG Path Mini-Language and you may be able to splice the array and values as you desire. Again I dont know if this is what you want or not.

A plunkr with the working code: https://plnkr.co/edit/Z0wI5fNxIsI6q358ySSg?p=preview

You may be able to find more information about path segments in the answers of this question: Alternative for deprecated SVG pathSegList

how to copy part of a path in d3

1 Answers1