javascript - 用 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 和 y2。是吗？谁知道这个？因为上面的链接没有给出复杂的例子。我会非常感谢你:)

已编辑

无论如何，这是来自上面链接的我的脚本:

//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 方法仅适用于单点数组，不适用于点元组数组。点元组描述三次贝塞尔曲线，这是 D3.js 辅助方法不支持的东西，大概是因为它们不像弧线或对 Angular 线那样直观地使用。

编辑:删除严重被黑的示例

完成此工作的最佳方法是将原始 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>