Line coordinates to path data...

[Steven Brown]

Aloha,

Short time user, first time caller.  I come from more of a design background, so forgive me if I seem to have no idea what I'm talking about.

I am creating lines that connect two nodes.  In order to get the lines just right, I've gone about deriving the coordinates of the end points:

var path = vis.selectAll('path.connection').data(connections).enter()

.append('svg:line')

.attr('x1', function(d) {

return getXFromElement(d.source);

})

.attr('x2', function(d) {

return getXFromElement(d.target);

})

.attr('y1', function(d) {

return getYFromElement(d.source);

})

.attr('y2', function(d) {

return getYFromElement(d.target);

})

   .attr('class', function(d) {

return "connection " + d.mission;

})

   .attr('marker-end', function(d) {

return "url(#" + d.mission + ")";

});

This works okay, but I'd really like to be able to make paths that have more than 2 points.  Seems straight forward using all the examples that have been posted.

The problem I am having is that in order to make a path, I need to convert my points to the SVG data string (M 0,0 10,50 24,3).

Is there a recommended way of doing this conversion?  I have a feeling I am just missing something obvious.

Many many thanks,

steve

[Ian Johnson]

The d3.svg.line function will help you with this. What you'll want to do is make arrays to hold your x and y points before hand, and then let the d3 line function do the hard work for you:

https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-_line

this may help understand whats going on too:

http://bost.ocks.org/mike/path/

--
Ian Johnson

http://enja.org

[Steven Brown]

Many thanks, Ian.

I had a sneaking suspicion I'd need to construct my own.  :)

[Chris Viau]

When I need more manual tweaking, I use this shortcut to build the path:

    var path = 'M'+data.join('L');

where data is of the form:

    [[1, 2], [3, 4]]

and it returns the path as a string:

"M1,2L3,4"

to be used for the d attribute:

    .attr("d", path)

[Mike Bostock]

> The problem I am having is that in order to make a path, I need to convert
> my points to the SVG data string (M 0,0 10,50 24,3).

As Ian pointed out, d3.svg.line is the most common way to convert an
array of points to a path string. Another idiom I sometimes use for
simple lines is this:

"M" + points.join("L")

Where points is an array of two-number arrays ([[x1, y1], [x2, y2],
…]), such as:

var points = [[0, 0], [1, 2], [3, 3]];

This takes advantage of the default toString behavior of JavaScript
arrays, which is to convert each element in the array to a string and
then join them with a comma. Those two-element arrays are then joined
with the character "L" to produce a polyline. The resulting string
looks like this:

M0,0L1,2L3,3

If you want a polygon rather than a polyline, you can also tack a "Z"
on the end.

Mike

[Chris Viau]

@Mike I beat you by 2 minutes ;)

[Steven Brown]

Mike and Chris (and Ian!), thanks so much.  Fabulous help!