在圆力布局图中将 d3.v3 迁移到 d3.v4答案

【问题标题】：Migrating d3.v3 to d3.v4 in circle force layout chart在圆力布局图中将 d3.v3 迁移到 d3.v4
【发布时间】：2016-12-27 07:57:10
【问题描述】：

我有以下使用 d3.v3 版本的圆力布局图代码。它工作正常。如何使用以下代码将版本 3 修改为版本 4

<!DOCTYPE html>
<html>
<head>
	<title>bubble</title>
<style>
.domain {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: 10px;
  stroke-linecap: round;
}
.halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 8px;
  stroke-linecap: round;
}
.tick {
	font-size: 10px;
}
.selecting circle {
  fill-opacity: .2;
}

.selecting circle.selected {
  stroke: #f00;
}
.handle {
	fill: #fff;
	stroke: #000;
	stroke-opacity: .5;
	stroke-width: 1.25px;
	cursor: crosshair;
}
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<p id="nodeCount"></p>
<script>
function draw_bble(){
    var width = 700,
		height = 600,
		padding = 20;
		
	var start = new Date(2013,0,1),
		end = new Date(2013,11,31)

	var data = []
	
	for (i=0; i < 80; i++) {
		var point = {}
		
		var year = 2013;
		var month = Math.floor(Math.random()*12)
		var day = Math.floor(Math.random()*28)
		
		point.date = new Date(year, month, day)
		point.mIndex = i
		point.impact=Math.floor(Math.random()*80)
		data.push(point)		
	}
	console.log(data)
      var color = d3.scale.linear()
          .domain([d3.min(data, function(d){ return d.impact; }), (d3.max(data, function(d){ return d.impact; })-d3.min(data, function(d){ return d.impact; }))/2, d3.max(data, function(d){ return d.impact; })])
          .range(["red","#FFFF55","green"]);
	var force = d3.layout.force()
		.nodes(JSON.parse(JSON.stringify(data)))
		.size([width - padding, height - 100])
		.on("tick", tick)
		.start()
	
	var svg = d3.select("body").append("svg")
		.attr({
			"width": width,
			"height": height
		})	
	
	//build stuff
	var x = d3.time.scale()
		.domain([start, end])
		.range([padding, width - 6*padding])
		.clamp(true)	
	
	var xAxis = d3.svg.axis()
		.scale(x)
		.tickSize(0)
		.tickPadding(20)
		//.tickFormat(d3.time.format("%x"))	
			
	//manipulate stuff
	d3.selectAll(".resize").append("circle")
		.attr("cx", 0)
		.attr("cy", 0)
		.attr("r", 10)
		.attr("fill", "Red")
		.classed("handle", true)
	
	d3.select(".domain")
		.select(function() {return this.parentNode.appendChild(this.cloneNode(true))})
		.classed("halo", true)

	function tick() {
		var nodes = svg.selectAll(".node")
            .data(force.nodes(), function(d) { return d.mIndex; })
		
		nodes
			.attr("cx", function(d) {return d.x})
			.attr("cy", function(d) {return d.y})
			
		nodes
			.enter()
                .append("circle")
			    .attr("r", 10)
			    .attr("fill",function(d){ return color(d.impact)})
			    .call(force.drag)
			    .attr("class", "node")
				.attr("cx", function(d) {return d.x})
				.attr("cy", function(d) {return d.y})
				.style("stroke","#000")
                .style("stroke-width","1px")

		nodes
			.exit()
				.remove()
	}
}
draw_bble();
</script>
</body>
</html>

我必须使用最新的 d3.v4 版本，而不是 d3.v3 版本。是否可以使用版本 3 代码更改版本

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

以下是必要的更改：

var color = d3.scaleLinear()

而不是scale.linear()。

对于原力：

var force = d3.forceSimulation()
    .force("collide", d3.forceCollide(12))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .nodes(data)
    .on("tick", tick);

这是一个带有“输入”选择的演示（我将它移到了tick 函数之外，除了删除所有与强制无关的代码）：

function draw_bble() {
    var width = 500,
        height = 400,
        padding = 20;

    var start = new Date(2013, 0, 1),
        end = new Date(2013, 11, 31)

    var data = []

    for (i = 0; i < 80; i++) {
        var point = {}

        var year = 2013;
        var month = Math.floor(Math.random() * 12)
        var day = Math.floor(Math.random() * 28)

        point.date = new Date(year, month, day)
        point.mIndex = i
        point.impact = Math.floor(Math.random() * 80)
        data.push(point)
    }

    var color = d3.scaleLinear()
        .domain([d3.min(data, function(d) {
            return d.impact;
        }), (d3.max(data, function(d) {
            return d.impact;
        }) - d3.min(data, function(d) {
            return d.impact;
        })) / 2, d3.max(data, function(d) {
            return d.impact;
        })])
        .range(["red", "#FFFF55", "green"]);

    var force = d3.forceSimulation()
        .force("collide", d3.forceCollide(12))
        .force("center", d3.forceCenter(width / 2, height / 2))
        .nodes(data)
        .on("tick", tick);

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

    var nodes = svg.selectAll(".node")
        .data(data, function(d) {
            return d.mIndex;
        }).enter()
        .append("circle")
        .attr("class", "node")
        .attr("r", 10)
        .attr("fill", function(d) {
            return color(d.impact)
        })
        .style("stroke", "#000")
        .style("stroke-width", "1px");

    function tick() {

        nodes.attr("cx", function(d) {
                return d.x
            })
            .attr("cy", function(d) {
                return d.y
            })
    }
}
draw_bble();

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

【讨论】：