参考Mike Bostock 的这个示例,我想将相同的想法应用于 X 和 Y 切换的条形图。所以标签沿着 Y 轴上下运行。
在这个小提琴中:http : //jsfiddle.net/2eLW6/我只是从 Mike 的示例中复制 wrap 函数并将其应用于我的图表。
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = …Run Code Online (Sandbox Code Playgroud) 这是我的代码:
function toggleClass(element, className){
d3.select(element).classed(className, !d3.select(element).classed(className));
}
d3.selectAll("rect").on("click", toggleClass(this, "clicked");
Run Code Online (Sandbox Code Playgroud)
我无法让它工作,似乎将参数传递给DOM事件是坏消息.有谁知道解决这个问题?
谢谢
这是关于jsfiddle的项目:http://jsfiddle.net/mLnB3/
我有这种格式的数据:
var data = [
{
"category": "Category1",
"subcategories": [
{
"subcategory": "Subcategory1A",
"comments": [
{
"comment" : "1Acomment1",
"count": 8,
},
{
"comment": "1Acomment2",
"count": 7
}
]
},
{
"subcategory": "Subcategory1B",
"comments": [
{
"comment": "1Bcomment1",
"count": 11,
}
]
},
{
"subcategory": "Subcategory1C",
"comments": [
{
"comment": "1Ccomment1",
"count": 2,
}
]
}
]
},
{
"category": "Category2",
"subcategories": [
{
"subcategory": "Subcategory2A",
"comments": [
{
"comment": "2Acomment1",
"count": 6,
},
{
"comment": …Run Code Online (Sandbox Code Playgroud)