console 命令行工具 X clear

console

var width = 500;
var height = 500;

var xAxisWidth = 300;
var yAxisWidth = 300;

var padding = { top: 30, left: 50, right: 30, bottom: 30 }
var color = [ d3.color('rgb(0,0,255)'), d3.color('rgb(0,255,0)')]

var nodes = [
    { name: '0'},
    { name: '1'},
    { name: '2'},
    { name: '3'},
    { name: '4'},
    { name: '5'},
    { name: '6'},
]


// 必须使用source和target这两个名称
var edges = [
    { source: 0, target: 1 },
    { source: 0, target: 2 },
    { source: 0, target: 3 },
    { source: 1, target: 4 },
    { source: 1, target: 5 },
    { source: 1, target: 6 },
]

var svg = d3.select('body')
            .append('svg')
            .attr('width', width)
            .attr('height', height)

var force = d3.layout.force()
                .nodes(nodes)
                .links(edges)
                .size([width, height])
                .linkDistance(90)
                .charge(-400)

// 调用了forcet.start()后，源数组会发生改变
force.start()

var color = d3.scale.category20()

var lines = svg.selectAll('forceLine')
            .data(edges)
            .enter()
            .append('line')
            .attr('class', 'forceLine')

var circles = svg.selectAll('forceCircle')
                .data(nodes)
                .enter()
                .append('circle')
                .attr('class', 'forceCircle')
                .attr('r', 20)
                .attr('fill', function(d, i) {
                    return color(i)
                })
								.call(force.drag)

var texts = svg.selectAll('text')
                .data(nodes)
                .enter()
                .append('text')
                .attr('class', 'forceText')
                .attr('x', function(d) {
                    return d.x
                })
                .attr('y', function(d) {
                    return d.y
                })
                .attr('dy', '.3em')
                .text(function(d) {
                    return d.name
                })

  
force.on('tick', function() {
    // 更新连线的端点坐标
    lines.attr('x1', function(d) { return d.source.x })
    lines.attr('y1', function(d) { return d.source.y })
    lines.attr('x2', function(d) { return d.target.x })
    lines.attr('y2', function(d) { return d.target.y })

    circles.attr('cx', function(d) { return d.x })
    circles.attr('cy', function(d) { return d.y })
		// circles.call(drag)
    
    texts.attr('x', function(d) { return d.x })
    texts.attr('y', function(d) { return d.y })
})

var drag = force.drag().on('dragstart', function(d) {
  d.fixed = true
}).on('dragend', function(d, i) {
  d3.select(this).style('fill', color(i))
}).on('drag', function(d) {
  d3.select(this).style('fill', 'yellow')
})

<body>
  
</body>

.forceCircle {
  stroke: #333;
  stroke-width: 3px;
}

.forceLine {
  stroke: #000;
}