我使用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.v3版本,我必须使用最新的d3.v4版本。 是否可以使用版本3代码更改版本
答案 0 :(得分:3)
以下是必要的更改:
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);
这是一个带有&#34;进入&#34;的演示。选择(我移动到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();
&#13;
<script src="https://d3js.org/d3.v4.min.js"></script>
&#13;