d3 diagonal between two points

StackOverflow https://stackoverflow.com/questions/18454949

  •  26-06-2022
  •  | 
  •  

Question

I have points that I would like to create diagonal lines with. I don't want to use a tree layout, I just want two points and a diagonal line.

The following code is throwing an error: "Uncaught TypeError: Cannot read property 'y' of undefined "

---updated WORKING code ------

<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
//The data for our line
var lineData = [
    {
        "source": {
            "x": 100,
            "y": 300
        },
        "target": {
            "x": 200,
            "y": 400
        },
        "number":5
    },
    {
        "source": {
            "x": 150,
            "y": 350
        },
        "target": {
            "x": 250,
            "y": 450
        },
        "number":10
    },    
];

var lineFunction = d3.svg.diagonal()
   .projection(function(d) { return [d.y, d.x] })

var svgContainer = d3.select("body").append("svg")
                                .attr("width", 1000)
                                .attr("height", 1000);

svgContainer.selectAll("lines")
    .data(lineData)
    .enter()
    .append("path")
    .attr("d", lineFunction)
    .attr("stroke", "blue")
    .attr("stroke-width", function(d) { return d.number+"px"})
    .attr("fill", "none");
</script>
</body>
</html>
Was it helpful?

Solution

You're passing the entire lineData array into the lineFunction but it should just be an individual datum. Since you bound lineData to the selection, you could do .attr("d", lineFunction).

There are some problems with your diagonal as well. The source and target accessors both need to return objects, where in your case they are returning scalar values.

Then, the result objects returned from source and target will be subsequently fed into projection where each should be further converted into a 2 element array describing a point. If your source and target return an object with x and y defined ({x:, y:}) you don't need projection at all because the default will look for these properties.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top