d3.js 从一条路径绘制多条平行路径

Question

I am trying to draw multiple parallel paths based on one set of coordinates like on this example我正在尝试根据一组坐标绘制多条平行路径，例如本例

This is my code, and it is quite different from my expectations because lines overlap.这是我的代码，它与我的预期有很大不同，因为行重叠。 I was trying to make it work but I don't know what kind of offset calculations should I use.我试图让它工作，但我不知道我应该使用什么样的偏移计算。 This is what I get这就是我得到的

 (function ($) { $(document).ready(function() { var wHeight = $(window).height(); //The SVG Container var svgContainer = d3.select("#d3-line").append("svg") .attr("width", 1000) .attr("height", wHeight); var lineData = [ { "x": 100, "y": wHeight / 2 }, { "x": 300, "y": (wHeight / 2) - 150 }, { "x": 600, "y": wHeight / 2 }, { "x": 900, "y": (wHeight / 2) - 250 }, { "x": 1200, "y": (wHeight / 2) }, { "x": 1500, "y": (wHeight / 2) + 150}]; // https://www.dashingd3js.com/svg-paths-and-d3js //This is the accessor function we talked about above var lineFunction = d3.svg.line() .x(function(d) { return dx; }) .y(function(d) { return dy; }) .interpolate("monotone"); //The line SVG Path we draw var lineGraph = svgContainer.append("path") .attr("d", lineFunction(lineData)) .attr("stroke", "#00abc8") // .style("stroke-dasharray", ("1, 10")) .style("stroke-linecap", "round") .attr("stroke-width", 2) .attr("fill", "none"); var lineFunction2 = d3.svg.line() .x(function(d) { return dx + 4; }) .y(function(d) { return dy + 4; }) .interpolate("monotone"); //The line SVG Path we draw var lineGraph2 = svgContainer.append("path") .attr("d", lineFunction2(lineData)) .attr("stroke", "#00abc8") // .style("stroke-dasharray", ("1, 10")) .style("stroke-linecap", "round") .attr("stroke-width", 2) .attr("fill", "none"); }); })(jQuery);

 <!DOCTYPE html> <html lang="en-GB"> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div id="d3-line"></div> </body> </html>

Answer 1

You could clone the original path and apply a translation.您可以克隆原始路径并应用翻译。 Eg例如

var newPath = svgGroup.append("svg:path").attr("d", function() {
         return origPath.attr('d');
    })
    .attr("transform", "translate(4,4)");

d3.js 从一条路径绘制多条平行路径

问题描述

1 个解决方案

解决方案1
1 2016-04-29 12:42:31

d3.js 从一条路径绘制多条平行路径

问题描述

1 个解决方案

解决方案1 1 2016-04-29 12:42:31

解决方案1
1 2016-04-29 12:42:31