如何在D3

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

我不知道這是否會對您有所幫助，但您可以使用填充來查找路徑的所有部分。

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