лихие d3js с x, y, x1, y1, x2, y2, z

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

Ссылка, которую вы опубликовали, - это документация по API D3.js, так как я уверен, что вы знаете. В частности, ссылка говорит о вспомогательных методах D3.js для создания путей SVG без использования относительно тайного мини-языка SVG-пути.

Целью этих вспомогательных методов является отсутствие необходимости писать на мини-языке пути SVG. Результатом этих методов является код, написанный на мини-языке пути SVG.

Входные данные, которые вы хотите использовать для подачи этого API, уже записаны на мини-языке пути SVG.

Что вы, кажется, просят сделать, это преобразовать данные, уже написано в одном формате в другой формат, так что вы можете кормить его в API, который выводит данные в формате он был первоначально в.

Методы помощника D3.js не работают с форматом JSON, который вы им предоставляете. Метод d3.svg.line предназначен только для работы с массивами одиночных точек, а не с массивами точечных кортежей. Точечные корты описывают кривые Кубического Безье, то, что вспомогательные методы D3.js не поддерживают, по-видимому, потому, что они не так интуитивно понятны, чтобы работать с дугами или диагоналями или с тобой.

EDIT: удалено плохо взломан пример

Лучший способ сделать эту работу будет только кормить необработанные данные SVG обратно в D3.js.

EDIT: Вы можете добавить идентификатор и класс атрибуты элементов с использованием attr() метода:

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>