1

I found this link and applied my path. It runs but giving me unexpected output.

I convert my original path:

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

which give me this output:

My Original inline SVG path

to this array as the link above instructed me:

[{"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"}]

but giving me this output:

enter image description here

aarrrggggg....It's so far from the original. I think it's because the converted path has the x1,y1,x2 and y2. Is it? Anyone who knows this? Because the link above don't give complex examples. I will very much appreciated you :)

EDITED

Here's my script anyways from the link above:

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

Thanks in advance.

5
  • What is the value of the d attribute in the second case? Sep 22, 2014 at 14:00
  • @musically_ut, you mean the second output? It's the same with the the original path, the difference is I convert it to json, please see this fiddle on how I convert it into JSON. jsfiddle.net/yprgsvk7/1
    – oxe
    Sep 23, 2014 at 6:24
  • What are you actually trying to do here? Could you not simply specify the d string in your JSON? Sep 23, 2014 at 20:56
  • Can you post the code that's consuming your JSON data? Sep 23, 2014 at 22:13
  • The second output must look like the first one. There's a link above that I provided. That's exactly what I want. The example on that link has a x and y coordinates. Unfortunately, Im using GIMP for creating a map and converting it to path which gives me a SVG code. The problem is, in that path it has not only x and y coordinates but a x1,y1,x2 and y2 too. That's what Im trying to figure out but I cant find any. Even in the link they don't provide examples such as mine. Anyways, I'd edit my question for more further clarifications.
    – oxe
    Sep 24, 2014 at 2:06

1 Answer 1

2
+50

The link you posted is documentation on the D3.js API, as I'm sure you're aware. Specifically the link talks about D3.js helper methods for making SVG paths without having to use the relatively arcane SVG path mini-language.

The purpose of these helper methods is to avoid having to write in the SVG path mini-language. The output of these methods is code written in the SVG path mini-language.

The input data that you want to use to feed this API is already written in the SVG path mini-language.

What you seem to be asking to do is convert data that is already written in one format to a different format so that you can feed it into an API that outputs the data in the format it was originally in.

The D3.js helper methods don't work well with the JSON format you're providing them. The d3.svg.line method is only designed to work with arrays of single points, not arrays of point tuples. The point tuples describe Cubic Bezier curves, something the D3.js helper methods don't support, presumably because they're not as intuitive to work with as arcs or diagonals or what have you.

EDIT: removed badly hacked example

The best way to make this work would be just to feed the raw SVG data back into D3.js.

EDIT: You can add id and class attributes to elements using the attr() method:

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>

6
  • 1
    is there a way to improve the drawing? I mean it is too edgy. No curves really? Sorry I'm newbie in SVG.
    – AlexJaa
    Sep 24, 2014 at 6:01
  • 1
    See my edit. You can do it if you just feed the path data directly back into the D3.js attr function without any conversion. I'm still unclear why you need to convert the data format to JSON before trying to get D3.js to spit out the data in the exact same format you started with. Sep 24, 2014 at 14:24
  • 1
    Wow!!! This works better, well, for some purpose, I just want to have an overall control with svg path(adding id and class). I guess you have already familiar with jvectormap. The function I want there is zooming and panning. But it dont allow me for putting or adding id and class. For some purposes, id and class is important in my project. If you have any suggestions or some libraries that you know solving my problem I highly appreciate it :) Well, I appreciate your effort for this, though it will still hard for me coz it is not just one path but a thousands of them.
    – AlexJaa
    Sep 25, 2014 at 2:53
  • 2
    I think what you're asking is how to set an id and class attribute? Hopefully my edited answer will provide what you're looking for. Sep 25, 2014 at 17:37
  • 1
    @bmceldowney, how can I add another path without appending another SVG? I mean, the 2 paths must be inside one appended SVG. Can I add path2, linedata2 and append svgContainer2???
    – oxe
    Sep 26, 2014 at 2:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.