如何在图的D3节点中添加自定义颜色
我正在为一个图使用D3api，其中一对节点由父节点形成。我希望以每个父节点具有固定颜色而子节点具有不同颜色的方式为整个图的节点着色，即根节点始终具有红色，左侧子节点为蓝色，右侧子节点为绿色，如果只有一个子节点，则为绿色。我正在使用此api，，
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.27.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.1"></script>
<style type="text/css">
line.link {
stroke: #ccc;
}
circle.node {
fill: #000;
stroke: #fff;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 960,
h = 500,
r = d3.scale.sqrt().domain([0, 20000]).range([0, 20]);
var force = d3.layout.force()
.gravity(.01)
.charge(-120)
.linkDistance(60)
.size([w, h]);
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
d3.xml("flare.xml", "application/xml", function(xml) {
var nodes = self.nodes = d3.select(xml).selectAll("*")[0],
links = self.links = nodes.slice(1).map(function(d) {
return {source: d, target: d.parentNode};
});
force
.nodes(nodes)
.links(links)
.start();
var link = svg.selectAll("line.link")
.data(links)
.enter().append("svg:line")
.attr("class", "link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
var node = svg.selectAll("circle.node")
.data(nodes)
.enter().append("svg:circle")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return r(d.textContent) || 5; })
.call(force.drag);
force.on("tick", function() {
nodes[0].x = w / 2;
nodes[0].y = h / 2;
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
</body>
</html>
有人能帮我吗
共有1个答案
SVG有自己的CSS属性，其中之一是< code>fill。它设置SVG元素的填充颜色。
以下是您如何将其与D3一起使用：
var node = svg.selectAll("circle.node")
.data(nodes)
.enter().append("svg:circle")
.style("fill", function (d) { return '#1f77b4'; })
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return r(d.textContent) || 5; })
.call(force.drag);
这里，所有节点的颜色值（#1f77b4）都相同。如果您想用特定的算法为节点着色，D3提供预定义的分类色阶。
编辑：这是一个相关的SO问题。其中一个答案有一个很好的自定义序数色阶示例。
-
问题内容： 我正在使用Twitter Bootstrap添加图标，没有问题。他们有很多选择。 http://twitter.github.com/bootstrap/base- css.html#icons 但是，我找不到菜单项之一的适当图标。关于“汽车”。我想要的是我想添加我的自定义图标。我怎样才能做到这一点？ 问题答案： 您可以通过在自己的类（如）中定义图标来创建自己的图标： 当然要记住使用前
-
我对覆盆子皮和结节红很陌生。我想添加自定义节点到firebase使用节点-红色节点。下面是我的数据库截图： 我已经使用firebase节点的push选项来创建多个具有自动生成ID的节点。我想在node-red中使用firebase节点给出自定义ID，如“user1”、“user2”等。如何才能做到这一点。
-
问题内容： 我一直在尝试使用AlloyUI的图表构建器示例。 我需要添加一些额外的自定义节点类型以及这些节点的一些其他属性。我曾考虑过修改然后构建库，但这听起来像是对这项任务的过大杀伤力，而且我在构建时遇到了问题。 是否有捷径可寻？ 更新 我意识到我可以直接修改构建文件夹中的文件以摆脱构建过程。我尝试添加类似的内容： 到。 我有这样的主要javascript文件结构： 我知道可以在图表中添加自定义
-
问题内容： 我想设置色彩图的中间点，即我的数据从-5到10，我希望零成为中间点。我认为实现此目的的方法是归一化规范化并使用规范，但是我没有找到任何示例，我也不清楚我到底要实现什么。 问题答案： 请注意，在matplotlib 3.1版中，添加了DivergingNorm类。我认为它涵盖了您的用例。可以这样使用： 在matplotlib 3.2中，该类已重命名为TwoSlopesNorm
-
是否有一个时间格式来指定这样的日期序列到轴在D3和v4？
-
跟着这个答案https://stackoverflow.com/a/55113171/324969这个答案https://stackoverflow.com/a/60686826/324969. 如果我按下Ctrl，逗号，在设置中搜索“颜色”，单击settings.json中的
-
我希望在选择树中的某个节点时，动态地向该节点添加一些自定义渲染（可能是一个边框，也可能是一些颜色更改）。 我试过这个： 但它似乎不起作用。 我还希望渲染器是可添加的（或链接的）。我已经在节点上进行了类似图标的渲染，因此新的渲染器应该与其他渲染器互补。不确定extjs是否可以做到这一点？
-
我想在向url发送请求时添加假用户代理。但它并没有添加假useragent，而是使用默认的useragent。