用x，y，x1，y1，x2，y2，z划分d3js

Question

我找到了这个link并应用了我的路径。它运行但给我意想不到的输出。

我转换原始路径：

<path id="secnb1l1" class="lungon"
    fill="none" stroke="red" stroke-width="5"
    d="M 93.00,444.00
       C 93.00,444.00 114.00,506.00 114.00,506.00
         102.30,512.28 100.00,518.71 100.00,531.00
         100.00,531.00 86.00,534.00 86.00,534.00
         86.00,534.00 68.95,485.00 68.95,485.00
         68.95,485.00 58.00,452.00 58.00,452.00
         58.00,452.00 93.00,444.00 93.00,444.00 Z
       M 75.00,458.00
       C 75.00,458.00 79.00,458.00 79.00,458.00
         78.99,466.29 79.26,463.93 76.00,471.00
         76.00,471.00 86.00,471.00 86.00,471.00
         82.12,462.60 83.00,464.37 83.00,455.00
         83.00,455.00 75.00,458.00 75.00,458.00 Z" />

给我这个输出：

到这个数组，如上面的链接指示我：

[{"type":"M","x":93,"y":444},{"type":"C","x":114,"y":114,"x1":93,"y1":444,"x2":114,"y2":506},{"type":"C","x":100,"y":100,"x1":102.30000305175781,"y1":512.280029296875,"x2":100,"y2":518.7100219726562},{"type":"C","x":86,"y":86,"x1":100,"y1":531,"x2":86,"y2":534},{"type":"C","x":68.94999694824219,"y":68.94999694824219,"x1":86,"y1":534,"x2":68.94999694824219,"y2":485},{"type":"C","x":58,"y":58,"x1":68.94999694824219,"y1":485,"x2":58,"y2":452},{"type":"C","x":93,"y":93,"x1":58,"y1":452,"x2":93,"y2":444},{"type":"Z"},{"type":"M","x":75,"y":458},{"type":"C","x":79,"y":79,"x1":75,"y1":458,"x2":79,"y2":458},{"type":"C","x":76,"y":76,"x1":78.98999786376953,"y1":466.2900085449219,"x2":79.26000213623047,"y2":463.92999267578125},{"type":"C","x":86,"y":86,"x1":76,"y1":471,"x2":86,"y2":471},{"type":"C","x":83,"y":83,"x1":82.12000274658203,"y1":462.6000061035156,"x2":83,"y2":464.3699951171875},{"type":"C","x":75,"y":75,"x1":83,"y1":455,"x2":75,"y2":458},{"type":"Z"}]

但是给我这个输出：

aarrrggggg ....它与原版相距甚远。我认为这是因为转换后的路径有x1,y1,x2 and y2。是吗？谁知道这个？因为上面的链接没有给出复杂的例子。我将非常感谢你:)。

EDITED

以下链接来自我的脚本：

//This is my converted path. On how I convert it there's a fiddle below.
var lineData = [{"type":"M","x":93,"y":444},{"type":"C","x":114,"y":114,"x1":93,"y1":444,"x2":114,"y2":506},{"type":"C","x":100,"y":100,"x1":102.30000305175781,"y1":512.280029296875,"x2":100,"y2":518.7100219726562},{"type":"C","x":86,"y":86,"x1":100,"y1":531,"x2":86,"y2":534},{"type":"C","x":68.94999694824219,"y":68.94999694824219,"x1":86,"y1":534,"x2":68.94999694824219,"y2":485},{"type":"C","x":58,"y":58,"x1":68.94999694824219,"y1":485,"x2":58,"y2":452},{"type":"C","x":93,"y":93,"x1":58,"y1":452,"x2":93,"y2":444},{"type":"Z"},{"type":"M","x":75,"y":458},{"type":"C","x":79,"y":79,"x1":75,"y1":458,"x2":79,"y2":458},{"type":"C","x":76,"y":76,"x1":78.98999786376953,"y1":466.2900085449219,"x2":79.26000213623047,"y2":463.92999267578125},{"type":"C","x":86,"y":86,"x1":76,"y1":471,"x2":86,"y2":471},{"type":"C","x":83,"y":83,"x1":82.12000274658203,"y1":462.6000061035156,"x2":83,"y2":464.3699951171875},{"type":"C","x":75,"y":75,"x1":83,"y1":455,"x2":75,"y2":458},{"type":"Z"}]


//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
                     .x(function(d) { return d.x; })
                     .y(function(d) { return d.y; })
                     .interpolate("cardinal");

//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("d", lineFunction(lineData))
                        .attr("stroke", "blue")
                        .attr("stroke-width", 2)
                       .attr("fill", "none");

This link for converting svg path to JSON

提前致谢。

Answer 1

您发布的链接是关于D3.js API的文档，因为我相信您已经知道了。特别是该链接讨论了用于制作SVG路径的D3.js辅助方法，而不必使用相对神秘的SVG路径迷你语言。

这些辅助方法的目的是避免必须在SVG路径中编写迷你语言。这些方法的输出是用SVG路径迷你语言编写的代码。

您要用于提供此API的输入数据已使用SVG路径迷你语言编写。

您似乎要做的是将已经以一种格式编写的数据转换为不同的格式，以便您可以将其输入到以最初格式输出数据的API中。

D3.js帮助程序方法与您提供的JSON格式不兼容。 d3.svg.line方法仅用于处理单点数组，而不是点元组数组。点元组描述了Cubic Bezier曲线，这是D3.js辅助方法不支持的东西，可能是因为它们不像弧形或对角线一样直观，或者是什么东西。

编辑：删除了严重被黑的示例

实现这项工作的最佳方法就是将原始SVG数据反馈回D3.js。

编辑：您可以使用attr()方法向元素添加id和class属性：

var path = document.getElementById('secnb1l1');
var lineData = path.attributes['d'].value;

var svgContainer = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 400)
    .attr("viewBox", "50 440 100 100");

//The line SVG Path we draw
svgContainer.append("path")
    .attr("id", "myId")
    .attr("class", "myClass")
    .attr("d", lineData)
    .attr("stroke", "red")
    .attr("stroke-width", 2)
    .attr("fill", "none");

.myClass {
  outline: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="0" height="0">
<path id="secnb1l1" class="lungon"
    fill="none" stroke="black" stroke-width="1"
    d="M 93.00,444.00
       C 93.00,444.00 114.00,506.00 114.00,506.00
         102.30,512.28 100.00,518.71 100.00,531.00
         100.00,531.00 86.00,534.00 86.00,534.00
         86.00,534.00 68.95,485.00 68.95,485.00
         68.95,485.00 58.00,452.00 58.00,452.00
         58.00,452.00 93.00,444.00 93.00,444.00 Z
       M 75.00,458.00
       C 75.00,458.00 79.00,458.00 79.00,458.00
         78.99,466.29 79.26,463.93 76.00,471.00
         76.00,471.00 86.00,471.00 86.00,471.00
         82.12,462.60 83.00,464.37 83.00,455.00
         83.00,455.00 75.00,458.00 75.00,458.00 Z" /></svg>