d3 diagonal basic

by mnk

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<div class="tree-view"></div>

CSS

body {
    margin: 40px 20px;
}

JavaScript

var data = {
    name: "aaaa",
    children: [{
        name: 'bbbb'
    }, {
        name: 'cccc'
    }]
};

var canvas = d3.select('.tree-view').append('svg')
    .attr('width', 500)
    .attr('height', 500);
var diagonal = d3.svg.diagonal()
    .source({
    x: 10,
    y: 10
})
    .target({
    x: 300,
    y: 300
})

canvas.append('path')
    .attr('fill', 'none')
    .attr('stroke', 'black')
    .attr('d', diagonal)