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>
You're passing the entire
lineDataarray into thelineFunctionbut it should just be an individual datum. Since you boundlineDatato the selection, you could do.attr("d", lineFunction).There are some problems with your
diagonalas well. Thesourceandtargetaccessors both need to return objects, where in your case they are returning scalar values.Then, the result objects returned from
sourceandtargetwill be subsequently fed intoprojectionwhere each should be further converted into a 2 element array describing a point. If yoursourceandtargetreturn an object withxandydefined ({x:, y:}) you don't needprojectionat all because the default will look for these properties.