- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试修改此处的 D3 旭日形示例 (http://bl.ocks.org/mbostock/4063423) 以将标签添加到弧线。
我添加了代码来计算 Angular 并生成文本(取自此示例:http://jsfiddle.net/4PS53/6/)但它不起作用。文本只是不显示,当我尝试使用检查器检查
非常感谢任何帮助! JS代码如下(修改自原来的D3 gallery示例),JSON数据相同。我正在展示我修改过的代码部分;其余相同。
d3.json("data.json", function(error, root) {
console.log(root);
var path = svg.datum(root).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.style("fill-rule", "evenodd")
.each(stash);
path.append("text")
.text(function(d) { return d.name})
.classed("label", true)
.attr("x", function(d) { return d.x; })
.attr("text-anchor", "middle")
// translate to the desired point and set the rotation
.attr("transform", function(d) {
if (d.depth > 0) {
return "translate(" + arc.centroid(d) + ")" +
"rotate(" + getAngle(d) + ")";
} else {
return null;
}
})
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("pointer-events", "none");
});
function getAngle(d) {
// Offset the angle by 90 deg since the '0' degree axis for arc is Y axis, while
// for text it is the X axis.
var thetaDeg = (180 / Math.PI * (arc.startAngle()(d) + arc.endAngle()(d)) / 2 - 90);
// If we are rotating the text by more than 90 deg, then "flip" it.
// This is why "text-anchor", "middle" is important, otherwise, this "flip" would
// a little harder.
return (thetaDeg > 90) ? thetaDeg - 180 : thetaDeg;
}
最佳答案
您需要 g
组元素来添加文本,因此您只需更改:
var path = svg.datum(root).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.style("fill-rule", "evenodd")
.each(stash);
到
var path = svg.datum(root).selectAll("path")
.data(partition.nodes)
.enter().append("g")
path.append("path")
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.style("fill-rule", "evenodd")
.each(stash);
检查这个 jsFiddle: http://jsfiddle.net/5d0zd2s7/
关于javascript - 向 d3 sunburst 添加标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29884995/
在这里发布问题和答案,以免其他人以后遇到同样的麻烦...... 当我使用 d3.layout.partition 创建两个旭日图时,在调整切片大小时,第一个旭日的切片比例被第二个旭日的切片比例覆盖。
我正在尝试基于森伯斯特图实现 d3 可视化,并且我找到了一个几乎完美的在线示例,我已经开始工作 http://tributary.io/inlet/4127332/ : 我的主要问题是我还需要将文本剪
我有一个旭日图,它使用与 http://bl.ocks.org/kerryrodden/7090426 中的标准基本相同的代码。 . 但是,我的最后两个环中有很多很多“节点”,任何颜色组合都会使它看起
我正在尝试为著名的Kaggle Titanic challenge做一些数据可视化。 。我想绘制几个饼图,sunburst variant ,在内圈中放入一些特定特征(性别、机票类别等),在外圈中放入
我试图捕获旭日图上的钻取事件,但无法实现。 我将事件对象添加到图表对象中,但仍然无法在函数内触发警报。 我基本上希望在向下钻取一个/多个级别后,通过单击右上角的按钮进行向上钻取时触发警报/consol
是否可以覆盖旭日图的全局图表颜色?我尝试了多种方法,但似乎都不起作用。 请检查这个 fiddle :https://jsfiddle.net/max1tdzh/ chart: { height
我正在制作 D3 旭日图,内层是第一个类别,外层是第一个类别的子类别。例如在我的数据中,我想表明在所有样本中,有 67% 未验证和 33% 已验证,在已验证类别中,51% 是非法的,49% 是非法的,
我有一个朝阳,我想通过下拉菜单启动缩放功能。也就是说,当从下拉菜单中选择一个国家/地区名称时,它在旭日形图中的部分会像单击时一样缩放。 js fiddle :http://jsfiddle.net/8
我正在学习本教程: https://bl.ocks.org/denjn5/3b74baf5edc4ac93d5e487136481c601 它工作正常,但只有两个“环”数据。我想补充第三个。它使用以下
我正在使用这个型号:http://www.jasondavies.com/coffee-wheel/ : 我制作了一个效果很好的旭日,除了当我放大或缩小时,有时它会改变当前节点。 当我查看工具提示时,
我查看旭日图 - 即来自此示例: https://bl.ocks.org/kerryrodden/7090426 我想问D3中是否可以控制显示的环数。那么说我只想出现第二环? 我注意到这部分代码 //
我有一张用 D3 制作的旭日图。每个“花瓣”代表一个数据子集。当用户点击其中一个“花瓣”时,我希望它进行转换,散开以仅显示该子集(见图): 我无法让代码正确转换。 单击时,所有“花瓣”(除了选定的花瓣
所以我有一个非常标准的 D3“Sunburst”图。然而,中心路径(即根)太大了。它占据了我图表的很大一部分,由于围绕它的更重要的弧线争夺空间而被浪费了。 我正要在外环上添加标签,但我需要更多空间。
我似乎无法理解 sunburst在 sunburstR包处理某些参数,即赋予它的颜色向量以及它如何将颜色应用于不同的类别,以及如何显示不同分区的标签。 它是否有逻辑,是否有更好的方法来手动指定哪种颜色
我是 d3js 新手,我正在尝试在 D3js v4 Sunburst 上添加一些标签,如下所示: 你知道如何做到这一点吗?我没有找到任何可以帮助我的东西。 我使用了这个例子https://bl.ock
我已经获得了许多不同字符模式的数组,请参阅下面的data,并且我正在尝试将数据嵌套到分层 JSON 表单中,以便插入旭日可视化中。每个模式都由 n 个字符组成,尽管下面的模式是 8 个字符。讨论想要的
现在摆弄了几个小时后,我仍然无法让标签在我的 D3 Sunburst 布局中工作。这是它的样子: http://codepen.io/anon/pen/BcqFu 我尝试了几种可以在网上找到的方法,这
我正在尝试使用 Highchart 生成旭日图。作为引用,我使用 demo for the same from Highchart site 我根据我的要求修改了数据,但我想我错过了一些东西,因为它不
我在这里使用 d3.js v4 上的 Zoomable Sunburst:https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099
我正在尝试使用 d3.js 开发旭日图,但想删除弧之间的填充。我不想将它们合并为一个元素,因为我需要能够深入了解它们,相反,我希望从它们的同级弧中获得不可见的分隔符。我修改了 Mike 开发的原始图像
我是一名优秀的程序员,十分优秀!