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

Question

I have following circle force layout chart code using d3.v3 version.,It is working fine. 我有下面的圆形力布局图代码使用d3.v3版本。，它工作正常。 how to modify version 3 to version 4 using following code 如何使用以下代码将版本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 dx}) .attr("cy", function(d) {return dy}) 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 dx}) .attr("cy", function(d) {return dy}) .style("stroke","#000") .style("stroke-width","1px") nodes .exit() .remove() } } draw_bble(); </script> </body> </html>

Instead of d3.v3 version I have to use latest d3.v4 version. 代替d3.v3版本，我必须使用最新的d3.v4版本。 Is it possible change the version using version 3 code 是否可以使用版本3代码更改版本

Answer 1

Here are the necessary changes: 以下是必要的更改：

var color = d3.scaleLinear()

Instead of scale.linear() . 代替scale.linear() 。

And for the force: 而对于力量：

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

Here is a demo with the "enter" selection (which I moved outside the tick function, besides removing all code that doesn't matter for the force): 这是一个带有“ enter”选择的演示（除了删除所有与力无关的代码外，我将其移到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 dx }) .attr("cy", function(d) { return dy }) } } draw_bble();

 <script src="https://d3js.org/d3.v4.min.js"></script>

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-12-27 14:29:17

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-12-27 14:29:17

解决方案1
3 已采纳 2016-12-27 14:29:17