Drawing lines between points in d3.js

Question

I'm trying to draw lines between plotted points using d3.js.

Sample geojson (FeatureCollection of 3 LineString): https://www.dropbox.com/s/hgkdvbnrgmb6kak/test.geojson?dl=0

Full Existing Code: https://www.dropbox.com/s/49820rs561vneti/test.html?dl=0

Code Chunk I'm having problem with:

lines.append("g").selectAll("path")
  .data(d3.entries(data.features)).enter()
  .append("svg:path")
  .attr("d", path)

The circles are appearing but not the line to connect them together.

Any help will be appreciated!

score 2 · Accepted Answer · edited Jun 23 '18 at 14:51

2

Mistake 1:

Inside your your topojson.

{
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        103.79971,
                        1.3013115
                    ],
                    [
                        103.8071998,
                        1.2932586
                    ]
                ]
            },
            "type": "Feature",//this is wrong
            "properties": {} 
        }

It should have been:

{
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        103.79971,
                        1.3013115
                    ],
                    [
                        103.8071998,
                        1.2932586
                    ]
                ]
            },
            "properties": {}
        }

Mistake 2:

  lines.append("g").selectAll("path")
    .data(d3.entries(data.features)).enter()
      .append("svg:path")
      .attr("d", path)
      .style("fill", "none")
      .style("stroke-width", "2px")

You can't create a line like this, for creating line you have to use a layer and add the feature to it like this(note the features are from your test.geojson):

d3.json("test.geojson", function(data) {
  layer1.features(data.features);//adding the features to the layer
  map.add(layer1);

Full working code here.

edited Jun 23 '18 at 14:51

halfer

19,824
17
99
186

answered Oct 12 '15 at 11:42

Cyril Cherian

32,177
7
46
55

thanks cyril! this helped a lot! Question though! Is there a reason why adding the line can't be done like in normal d3 graphs (with enter, exit)? Seems like if I want lines on maps, they have to be introduced as an additional layer (which I thought will be just for topo layer, shapefiles, etc). – iukie Oct 13 '15 at 02:39
the error in geojson is weird though, I was using the geojson package in python to create the geojson file. And from example code at https://github.com/JasonSanford/geojson-google-maps/blob/master/README.md which has an example of a FeatureCollection (though not with LineString), it seems to be similar. – iukie Oct 13 '15 at 02:47
Related to the problem but more of data format: Is it more expensive/ makes more sense to have the points for the line in 1 LineString instead of 3 (the current sample data) if the points are for a single group/user. – iukie Oct 13 '15 at 02:53
@iukie Yeah the reason why adding a line as shown under Mistake 2 will not work is that the line is not given a starting and end position, perhaps its very difficult to get that point.(MOre over you will have to handle the translate+scale when the map zoom and pans) So the best approach is to go with layers and pass the feature to it. I don't think its possible to achieve the same in D3... – Cyril Cherian Oct 13 '15 at 05:07
It would be good idea that you handle the points also via layer using your geojson file. This will be a good read http://geojson.org/geojson-spec.html#point – Cyril Cherian Oct 13 '15 at 05:09

Drawing lines between points in d3.js

1 Answers1