- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用这个型号:http://www.jasondavies.com/coffee-wheel/ :
我制作了一个效果很好的旭日,除了当我放大或缩小时,有时它会改变当前节点。
当我查看工具提示时,我可以看到“区域”没有引用正确的元素,它会将我发送到这个错误的元素。我不知道那是从哪里来的。
name
应该是“LDG”,但是有一个小区域,其中引用了另一个元素。
loadSunburstTree: function() {
var width = 960,
height = width,
radius = Math.min(width, height) / 2,
padding = 5,
duration = 1000;
var x = d3.scale.linear().range([0, 2 * Math.PI]);
var y = d3.scale.sqrt().range([0, radius]);
var color = d3.scale.category20c();
var path = null;
var arc = null;
var text = null;
$.ajax({
url: $("#path").val() + ".json",
method: "GET",
success: function(result) {
var data = {
"name": "home",
"level" : "root",
"children": []
};
[...] // filling the variable data here (data are correct),
var svg = d3.select("#graph").append("svg")
.attr("width", width)
.attr("height", height + 50)
.datum(data)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
path = svg.selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click);
text = svg.selectAll("text").data(partition.nodes);
text.enter().append("text")
.style("full-opacity", 1)
.style("fill", function(d) {
return brightness(d3.rgb(colour(d))) < 125 ? "#eee" : "#000";
})
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
})
.attr("dy", ".2em")
.attr("transform", function(d) {
var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle;
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.text(function(d) {
if( d.dx < .01){
d3.select(this).style("display","none");
}
return d.depth ? d.name : "";
})
.on("click", click);
}
});
function click(d) {
path.transition()
.duration(duration)
.attrTween("d", arcTween(d));
text.transition()
.duration(duration)
.attrTween("transform", function(d) {
return function() {
var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90;
var rotate = angle;
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
};
})
.attrTween("text-anchor", function(d) {
return function() {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
};
})
.style("fill-opacity", function(e) { return isParentOf(d, e) ? 1 : 1e-6; })
.each("end", function(e) {
d3.select(this).style("display","");
var st = e;
if (st.dx / d.dx < 0.01) {
d3.select(this).style("display","none");
} else {
d3.select(this).style("display","");
}
});
}
d3.select(self.frameElement).style("height", height + "px");
// Interpolate the scales!
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
function isParentOf(p, c) {
if (p === c) return true;
if (p.children) {
return p.children.some(function(d) {
return isParentOf(d, c);
});
}
return false;
}
function colour(d) {
if (d.children) {
// There is a maximum of two children!
var colours = d.children.map(colour),
a = d3.hsl(colours[0]),
b = d3.hsl(colours[1]);
// L*a*b* might be better here...
return d3.hsl((a.h + b.h) / 2, a.s * 1.2, a.l / 1.2);
}
return d.colour || "#fff";
}
function brightness(rgb) {
return rgb.r * .299 + rgb.g * .587 + rgb.b * .114;
}
}
};
PS:貌似demo也有这个问题,只是比较难注意到,因为没有工具提示。
PPS:可点击的元素是文本! (在大多数情况下)文本只有 opacity = 0
并且仍在 View 上。这就是问题所在。它们不得被正确隐藏。仍在努力。
最佳答案
问题就这样解决了。文本工具提示不再可见,也不再可单击:只需编辑 function click(d)
的文本代码,如下所示:
function click(d) {
path.transition()
.duration(duration)
.attrTween("d", arcTween(d));
text.transition()
.duration(duration)
.attrTween("transform", function(d) {
return function() {
var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90;
var rotate = angle;
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
};
})
.attrTween("text-anchor", function(d) {
return function() {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
};
})
//modified from here
.style("fill-opacity", function(e) {
if (isParentOf(d, e)) {
return 1;
} else {
return 0;
}
})
.each("end", function(e) {
if (e.dx / d.dx < 0.01 || $(this).css("fill-opacity") == 0) {
d3.select(this).style("display","none");
} else {
d3.select(this).style("display","");
}
});
//to here
}
关于javascript - Sunburst D3 文本问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24079314/
在这里发布问题和答案,以免其他人以后遇到同样的麻烦...... 当我使用 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 开发的原始图像
我是一名优秀的程序员,十分优秀!