- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
坚持对可折叠树示例进行样式设计,位于
D3代码:https://bl.ocks.org/mbostock/4339083
JSON:https://bl.ocks.org/mbostock/4339083(但不是使用 size,而是使用 number 设置为某个单位数字整数)
到目前为止,我已经修改了index.html:
nodeEnter.append("circle")
.attr("r", 1e-6)
*.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });*
致
.style("stroke", function(d) { return d.status > 0 ? "green" : "red";})
我希望节点在数字数据等于大于1的情况下填充红色,如果为零则填充绿色。
除此之外,如果有善良的灵魂也可以
我已经彻底搜索了所有在线资源,因此非常感谢任何想法。
最佳答案
我不确定你真正需要什么,但我认为你向 json 对象添加了一个属性 status
,并根据它的值,你为相应的元素提供了不同的圆圈颜色。
- entertain a third condition (i.e. a negative number)
在附加圈子时,您可以设置每个圈子的样式,如下所示:
如果项目的状态大于 1,则将 lines
属性设置为红色,否则如果它等于 0,则设置为绿色,否则(如果它是负数)设置为橙色。
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("stroke",
function(d) {
/*return color according to the current data's status value */
/*it is > 1 than red else if < 0 than orange else(if 0)than red */
return d.status >= 1 ?
"red"
:( d.status < 0 ? "orange" : "green")
}) ;
- direct me how to fill the colors on the ancestor nodes based off of the children nodes
我认为您想要将每个具有子项的圆的 fill
属性设置为与 lines
属性相同的颜色。
因此,在循环创建的圆圈时,您必须检查当前项目是否有子项(如果有),将 fill
属性设置为与 lines
属性相同的颜色,如下所示:
nodeUpdate.select("circle")
.attr("r", 4.5)
.style("fill",
function(d) {
/*check if children proprety exists for the current if yes
get its stoke color and set fill proprety it this value */
return d._children ? d3.select(this).style('stroke') : "" ;
}) ;
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var flare ={
"name": "positive with children",
"status":3,
"children": [
{
"name": "zero with children",
"status":0,
"children": [
{
"name": "positive with children",
"status":1,
"children": [
{"name": "positive with no children", "size": 3938,"status":3},
{"name": "negative with no children", "size": 3812,"status":-1},
{"name": "positive with no children", "size": 6714,"status":1}
]
},
{
"name": "negative with children",
"status":-2,
"children": [
{"name": "positive with no children", "size": 3534,"status":1},
{"name": "positive with no children", "size": 5731,"status":6}
]
}
]
},
{
"name":"postive with children",
"status":1,
"children": [
{"name": "negative with no children", "size": 599,"status":-3},
{"name": "zero with no children", "size": 386,"status":0},
{"name": "positive with no children", "size": 323,"status":3},
{"name": "zero with no children", "size": 307,"status":0}
]
},
{
"name":"negative with children",
"status":-3,
"children": [
{"name": "positive with no children", "size": 335,"status":1},
{"name": "negative with no children", "size": 383,"status":-1},
{"name": "zero with no children", "size": 874,"status":0},
{
"name": "positive with children",
"status":1,
"children": [
{"name": "positive with no children", "size": 3165,"status":1},
{"name": "zero with no children", "size": 2815,"status":0},
{"name": "negative with no children", "size": 3366,"status":-2}
]
}
]
}
]
};
root = flare;
root.x0 = height / 2;
root.y0 = 0;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
d3.select(self.frameElement).style("height", "800px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("stroke", function(d) { return d.status >= 1 ? "red" : ( d.status < 0 ? "orange" : "green") }) ;
//.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", 4.5)
//.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
.style("fill", function(d) { return d._children ? d3.select(this).style('stroke') : "";}) ;
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.0/d3.min.js"></script>
关于javascript - 基于数据填充和设计 D3 树节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39867460/
我正在使用 JavaFX 8 创建一个应用程序。我使用拖/放动态更改网格 Pane 的内容。我希望每行或每行/列迭代 GridPane 内容。JavaFX 允许通过指定行和列在 GridPane 中添
我正在尝试将图像拖放到div上。图像没有被拖到div上并给出以下错误 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': pa
我正在 android studio 中创建内部构建 AR 导航。我正在寻找一种方法将 anchor 与其他 anchor 或 anchor 节点/节点“连接”起来。我不确定使用哪一个。基于我将强制用
我在 Hive 上运行一些作业:首先是 4 节点,然后是 2 节点。令我惊讶的是,我的 2 节点性能比我的 4 节点更好。 首先,我在一个 4 节点(4 个事件节点)上运行查询,然后关闭 2 个节点(
我有 Node* current ,我在其中存储指向列表“顶部”当前节点的指针。当我将一个新节点设置为当前节点时,出现错误: '=' : cannot convert from 'CircularDo
我是 dcos Mesos 的新手,在本地 Ubuntu 机器上安装了 dc os。 我可以查看 dcos 仪表板。 但我无法使用 dcos node ssh --master-proxy --lea
在 JavaFX 中,是否有类似 setLayout(); 的东西?或 setBounds(); ? 例如,我想将按钮定位到我想要的位置。 最佳答案 JavaFX 场景图上的所有内容都是 Node .
我正在开发一个 JavaFX 应用程序,其中我开发的类(从 javafx.scene.Parent 扩展)是根据用户在 ListView 控件中单击的条目动态创建的。 只是要清楚这个节点,它不是使用像
我正在尝试为节点-边缘关系创建一个类图,因为它可以在有向图中找到。我想传达的是,Nodes 引用了 Edges,Edges 也引用了 Nodes。每个 Edge 都恰好需要两个 Node(源和目标)。
在mapreduce作业期间,单个任务将在随机节点上运行,是否有任何方法限制应在其中运行任务的节点? 最佳答案 Hadoop不会选择节点来随机运行任务。考虑到数据局部性,否则将有很多网络开销。 任务与
有什么区别: a) nodetool 重建 b) nodetool 修复 [-pr] 换句话来说,各个命令到底是做什么的? 最佳答案 nodetool重建:类似于引导过程(当您向集群添加新节点时),但
我已将第一个 OneToMany 关系添加到我的 hibernate 3.6.10 项目中。这是一个类: /** * */ package com.heavyweightsoftware.leal
是否有可能找到正在监听触发当前函数的事件的元素? 在下面的代码中,event.target 返回 #xScrollPane 和 event.currentTarget 和 event 的最低子节点.f
我正在尝试覆盖我数据库中的一些数据。结构很简单,就是: recipes { user_1{ recipe_1{data} recipe_2{data} } user_2{
我使用 setInterval 来运行该函数,但它会多次执行函数 2... 如何在输入中插入一个值后执行函数 第一个输入与其余输入的距离不同 如何在插入 val(tab 选项)后将插入从 1 个输入移
我不知道代码有什么问题,但在 visual studio 中不断收到这些错误消息。 Error 18 error C1903: unable to recover from previous e
我正在尝试从其类中获取 SharePoint 搜索导航节点的对象。 var nodes = $("div.ms-qSuggest-listItem"); 我正在获取节点对象,现在想要获取“_promp
D:\nodeP>node main.js module.js:327 抛出错误; ^ 错误:在 Function.Module 的 Function.Module._resolveFilename
struct node{ int key, prior, cnt, val; node *l, *r; node(){} node(int nkey) : key(nkey),
我有以下代码使用迭代器将项目插入双链表。这就是我们被要求这样做的方式。代码有效,但问题是我有 24 字节的绝对内存泄漏。 NodeIterator insert(NodeIterator & itrP
我是一名优秀的程序员,十分优秀!