D3 POC

D3 POC for arrows/lines in JB:JM

by Christopher McCulloh

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="canvas"></div>

<!-- <svg width="100" height="100">
<path d=" M 10 25
            L 10 75
            L 60 75
            L 10 25"
            stroke="red" stroke-width="2" fill="none" />
</svg> -->

<!-- <div id="thing1">thing1</div>

<div id="thing2">thing2</div> -->

CSS

#canvas{
    position:absolute;
    border: 1px solid red;
    top: 0;
    left: 0;
    height: 500px;
    width: 500px;
    background: transparent;
}

#thing1, #thing2 {
    width: 100px;
    height: 20px;
    border: 1px solid black;
    background-color: #eee;
    position: absolute;
}

#thing1{
    top: 40px;
    left:50px;
}

#thing1{
    top: 140px;
    left:150px;
}

JavaScript

var connections = [
    [{x: 100, y: 100}, {x: 200, y: 200}, {x: 210, y: 100}, {x: 200, y: 300}],   
    [{x: 100, y: 100}, {x: 200, y: 200}]
]

/*d3.select('#canvas')
    .selectAll('div')
    .data(connections)
    .enter()
    .append('div')
.text(function (d) { console.log(d); return d; });
*/
    
    
    
    var g = [{x: 100, y: 100}, {x: 200, y: 200}];
    var canvas = d3.select('#canvas').append('svg');

    var line = d3.svg.line()
    .x(function(d) { console.log('x', d); return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("basis");

    var diagonal = d3.svg.diagonal()
        .source(function(d) { return {x: 100, y: 100}; })            
        .target(function(d) { return {x: 200, y: 200}; })
        .projection(function(d) { return [d.y, d.x]; });

    canvas.append("path")
    .attr("d", diagonal(g))
    .attr('stroke', 'blue')
    .attr('stroke-width', 2)
    .attr('fill', 'none');