Drawing multiple paths at once

[Simon Knight]

Hi,

I'm confusing myself trying to draw multiple paths.

I have a graph of nodes and edges, and am able to draw a single path fine using the following code:

    var pathinfo = [1, 6, 4, 2];

    var traceroute_line = d3.svg.line()

      .x(path_x)

      .y(path_y)

      .interpolate("cardinal")

      .tension(1);

    chart.selectAll("path2")

      .data(pathinfo)

      .enter().append("path")

      .attr("d", traceroute_line(pathinfo))

      .style("stroke-width", 1)

      .style("stroke", "red")

      .style("fill", "none")

    ;

the pathinfo is a list of nodes, which path_x and path_y look up as appropriate.

However I'd like to extend this to display multiple paths at once, eg:

    var pathinfo = [

    [1, 6, 4, 2],

    [1,2,3]];

But am unsure how to perform the selects.

Can anyone point me in the right direction? I need to wrap the  chart.selectAll("path2") somehow but can't wrap my head around how.

Thanks!

Simon

[Jason Davies]

On Mon, Sep 03, 2012 at 02:15:13AM -0700, Simon Knight wrote:
> I have a graph of nodes and edges, and am able to draw a single path fine
> using the following code:
>
> var pathinfo = [1, 6, 4, 2];
>
> var traceroute_line = d3.svg.line()
> .x(path_x)
> .y(path_y)
> .interpolate("cardinal")
> .tension(1);
>
> chart.selectAll("path2")
> .data(pathinfo)

Note that by data-binding a 4-element array here, you're actually
creating 4 paths. Perhaps you didn't notice because they were all the
same, but they may have looked slightly pixelated due to the overlap.

For a single path, you should have said:

.data([[1, 6, 4, 2]])

For multiple paths, you can just pass the array of arrays:

.data([[1, 6, 4, 2], [1, 2, 3]])

> .enter().append("path")
> .attr("d", traceroute_line(pathinfo))

Instead of passing the *result* of this call to traceroute_line (which
returns a path string), you can pass the function itself. This will be
called for each selected element with the current datum and index as
arguments:

https://github.com/mbostock/d3/wiki/Selections#wiki-attr

So you would say:

.attr("d", traceroute_line)

This will work with the data-binding change I suggested above, which
binds an *array* to each element. So traceroute_line is called twice
(in the example with 2 paths): once with [1, 6, 4, 2] and again with
[1, 2, 3].

> .style("stroke-width", 1)
> .style("stroke", "red")
> .style("fill", "none")
> ;
>
> the pathinfo is a list of nodes, which path_x and path_y look up as
> appropriate.
> However I'd like to extend this to display multiple paths at once, eg:
> var pathinfo = [
> [1, 6, 4, 2],
> [1,2,3]];
>
> But am unsure how to perform the selects.

See above!

--
Jason Davies, http://www.jasondavies.com/

[Simon Knight]

That worked great - thank you!

[Christoph]

Thanks, that was very helpful.

best regards,

Christoph