如何更改D3js上的符号类型颜色？
Mih*_*tel 2 javascript svg colors d3.js force-layout
我想在D3代码中更改符号类型的颜色？我不知道如何完成我的var color = d3.scale.linear()工作.我试图随机化D3符号类型,但希望通过颜色区分它们.
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var w = 1260, //define the canvas
h = 500,
nodes = [], //nodes are shapes
node; //return node..data
var color = d3.scale.linear()
.domain ([0, h])
.range ([0, w]);
//creating canvas with svg property
var canvas = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
//https://github.com/mbostock/d3/wiki/Force-Layout#force
var force = d3.layout.force()
.nodes(nodes)
.links([]) //links are between nodes
.size([w, h]);
force.on("tick", function(d) {
canvas.selectAll("path")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
setInterval(function(){
// Add a new random shape.
nodes.push({
type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)], //pushing symbol types
size: Math.random() * 300 + 100 //randomize size
});
// Restart the layout.
force.start();
canvas.selectAll("path")
.data(nodes)
.enter().append("path")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
.attr("d", d3.svg.symbol()
.size(function(d) { return d.size; })
.type(function(d) { return d.type; }))
.style("fill", "#69d3bf")
.style("stroke", "#253544")
.style("stroke-width", "1.5px")
.call(force.drag);
}, 10); //1000 is time
</script>
这是您的示例,只是略微修改为可运行的代码段:
var w = 400;
var h = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var nodes = [];
//https://github.com/mbostock/d3/wiki/Force-Layout#force
var force = d3.layout.force()
.nodes(nodes)
.links([]) //links are between nodes
.size([w, h]);
force.on("tick", function(d) {
svg.selectAll("path")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
setInterval(function() {
// Add a new random shape.
nodes.push({
type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)], //pushing symbol types
size: Math.random() * 300 + 100 //randomize size
});
// Restart the layout.
force.start();
svg.selectAll("path")
.data(nodes)
.enter().append("path")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
.attr("d", d3.svg.symbol()
.size(function(d) {
return d.size;
})
.type(function(d) {
return d.type;
}))
.style("fill", "#69d3bf")
.style("stroke", "#253544")
.style("stroke-width", "1.5px")
.call(force.drag);
}, 3000); //1000 is time<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
请注意,只支持六个符号.
我将提出两个解决方案,以帮助您入门.您可以根据自己的需要进行调整,当然还可以在文档的帮助下进行调整.
第一解决方案
代码的关键部分:
.style("fill", function(d) {
console.log(d);
var symbolIndex = 0;
for(var i=0; i<d3.svg.symbolTypes.length; i++){
if(d.type == d3.svg.symbolTypes[i])
symbolIndex=i;
};
return color(symbolIndex);
})
color 定义为从黄色到紫色的线性刻度:
var color = d3.scale.linear()
.domain ([0, d3.svg.symbolTypes.length-1])
.range (["yellow", "violet"]);
var w = 400;
var h = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var nodes = [];
var color = d3.scale.linear()
.domain ([0, d3.svg.symbolTypes.length-1])
.range (["yellow", "violet"]);
//https://github.com/mbostock/d3/wiki/Force-Layout#force
var force = d3.layout.force()
.nodes(nodes)
.links([]) //links are between nodes
.size([w, h]);
force.on("tick", function(d) {
svg.selectAll("path")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
setInterval(function() {
// Add a new random shape.
nodes.push({
type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)], //pushing symbol types
size: Math.random() * 300 + 100 //randomize size
});
// Restart the layout.
force.start();
svg.selectAll("path")
.data(nodes)
.enter().append("path")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
.attr("d", d3.svg.symbol()
.size(function(d) {
return d.size;
})
.type(function(d) {
return d.type;
}))
.style("fill", function(d) {
console.log(d);
var symbolIndex = 0;
for(var i=0; i<d3.svg.symbolTypes.length; i++){
if(d.type == d3.svg.symbolTypes[i])
symbolIndex=i;
};
return color(symbolIndex);
})
.style("stroke", "#253544")
.style("stroke-width", "1.5px")
.call(force.drag);
}, 3000); //1000 is time<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
二解决方案
如果要为每个符号显式设置颜色,可以使用:
var color = d3.scale.linear()
.domain ([0, 1, 2, 3, 4, 5])
.range (["red", "blue", "green", "tan", "gray", "orange"]);
var w = 400;
var h = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var nodes = [];
var color = d3.scale.linear()
.domain ([0, 1, 2, 3, 4, 5])
.range (["red", "blue", "green", "tan", "gray", "orange"]);
//https://github.com/mbostock/d3/wiki/Force-Layout#force
var force = d3.layout.force()
.nodes(nodes)
.links([]) //links are between nodes
.size([w, h]);
force.on("tick", function(d) {
svg.selectAll("path")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
setInterval(function() {
// Add a new random shape.
nodes.push({
type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)], //pushing symbol types
size: Math.random() * 300 + 100 //randomize size
});
// Restart the layout.
force.start();
svg.selectAll("path")
.data(nodes)
.enter().append("path")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
.attr("d", d3.svg.symbol()
.size(function(d) {
return d.size;
})
.type(function(d) {
return d.type;
}))
.style("fill", function(d) {
console.log(d);
var symbolIndex = 0;
for(var i=0; i<d3.svg.symbolTypes.length; i++){
if(d.type == d3.svg.symbolTypes[i])
symbolIndex=i;
};
return color(symbolIndex);
})
.style("stroke", "#253544")
.style("stroke-width", "1.5px")
.call(force.drag);
}, 3000); //1000 is time<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>