个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我的要求是生成分组类别条形图。我能够生成该图，但问题是如果 x 轴标签名称大于条形范围带，则标签名称重叠。因此无法获得预期的良好外观和感觉。我找到了一些我们可以包装文本的地方标签，但我不知道如何实现。
这里是生成分组分类图表相关的js和html代码
var margin = {
top: 20,
right: 20,
bottom: 130,
left: 40
},
width = 2360 - margin.left - margin.right,
height = 560 - margin.top - margin.bottom;
var color = {
Mechanical: '#4A7B9D',
Electrical: '#54577C',
Hydraulic: '#ED6A5A'
};
var barPadding = 40;
var data = [
{
"key" : "portFolio1",
"values" :[
{
"key" : "project1",
"values" :[
{
"key" : "config1",
"values" :[
{
"key" :"date1",
"value": 12
},
{
"key" : "date2",
"value": 10
},
{
"key" : "date3",
"value": 2
}
],
},
{
"key" : "configurationwithvalue",
"values" :[
{
"key" :"date1asa",
"value": 10
},
{
"key" : "date2",
"value": 10
},
{
"key" : "date3",
"value": 2
}
],
},
{
"key" : "config2",
"values" :[
{
"key" : "date1",
"value": 1
},
{
"key" : "date3",
"value": 14
}
],
}
],
},
{
"key" : "projct2",
"values" :[
{
"key" : "congi1",
"values" :[
{
"key" : "date2",
"value" :1
},
{
"key" : "date3",
"value": 10
}
],
}
],
}
] ,
},
{
"key" : "portfolio2",
"values" :[
{
"key" : "portfolio2_project1",
"values" :[
{
"key" : "congie1",
"values" : [
{
"key" : "date12",
"value": 23
},
{
"key" : "date1",
"value" : 1
}
],
}
],
}
],
},
{
"key" : "portFolio3",
"values" :[
{
"key" : "project_portfolio3",
"values" :[
{
"key" : "congi1",
"values" :[
{
"key" :"date1",
"value": 12
}
],
},
{
"key" : "congi2",
"values" :[
{
"key" : "date1",
"value": 1
},
{
"key" : "date3",
"value": 14
}
],
}
],
},
{
"key" : "projct2_prortfolio_23",
"values" :[
{
"key" : "congi1",
"values" :[
{
"key" : "date2",
"value" :1
},
{
"key" : "date3",
"value": 10
}
],
}
],
}
] ,
}
]
var rangeBands = [];
var cummulative = 0; // to get transform position of categories 'portfolio1,portfolio2,portfolio3 on x axis scale
data.forEach(function(val, i) {
var valLength = 0; // to get position of x axis for categories 'portfolio1,portfolo2,portfolio3 on x axis scale
val.cummulative = cummulative;
var cum = 0; // to get trnsfrom position of categories 'projct1,project2,project3' on x axis scale
val.values.forEach(function(values) {
var valLe = 0; // to get position of x axis for categories 'projct1,project2,project3' on x axis scale
values.cummulative2 = cum;
values.parentKey = val.key;
var cum3 = 0; // to get trnsfrom position of categories 'config1,config2...etc on x axis scale
values.values.forEach(function(values) { // config level
values.cummulative3 = cum3;
values.parentKey = values.key;
values.values.forEach(function(values) {
cum3 = cum3 +1;
valLe = valLe + 1;
cum = cum+1;
valLength = valLength +1 ;
cummulative = cummulative+1;
values.parentKey = values.key;
rangeBands.push(i);
})
})
values.valueLength2 = valLe;
})
val.valueLength = valLength;
});
// set x axis domain adn range
var x_category = d3.scale.linear()
.range([0, width]);
var x_defect = d3.scale.ordinal().domain(rangeBands).rangeRoundBands([0, width], .1);
var x_category_domain = x_defect.rangeBand() * rangeBands.length*3;
x_category.domain([0, x_category_domain]);
// y axis domain and range
var y = d3.scale.linear()
.range([height, 0]);
y.domain([0, d3.max(data, function(cat) {
return d3.max(cat.values, function(def) {
return d3.max(def.values, function(def) {
return d3.max(def.values, function(def) {
return def.value;
});
});
});
})]);
// x axis scale
var category_axis = d3.svg.axis()
.scale(x_category)
.orient("bottom");
// y axis scale
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style('background-color', 'EFEFEF')
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
//add all category groups of 'profolio1,portfolio2,portfolio3 ..etc for svg
var category_g = svg.selectAll(".category")
.data(data)
.enter().append("g")
.attr("class", function(d) {
return 'category category-' + d.key;
})
.attr("transform", function(d) {
return "translate(" + x_category((d.cummulative * x_defect.rangeBand())) + ",0)";
});
//add all category groups of projct1,project2 etc for every category group of category_g
var category_g1 = category_g.selectAll(".category1")
.data(function(d) {
return d.values;
})
.enter().append("g")
.attr("class", function(d) {
return 'category category1-' + d.key;
})
.attr("transform", function(d) {
return "translate(" + x_category((d.cummulative2 * x_defect.rangeBand())) + ",0)";
})
//add all category groups of 'congif1,config2' etc for every category group of category_g1
var category_g2 = category_g1.selectAll(".category2")
.data(function(d) {
return d.values;
})
.enter().append("g")
.attr("class", function(d) {
return 'category category2-' + d.key;
})
.attr("transform", function(d) {
return "translate(" + x_category((d.cummulative3 * x_defect.rangeBand())) + ",0)";
})
// lables for category_g
var category_label = category_g.selectAll(".category-label")
.data(function(d) {
return [d];
})
.enter().append("text")
.attr("class", function(d) {
return 'category-label category-label-' + d.key;
})
.attr("transform", function(d) {
var x_label = x_category((d.valueLength * x_defect.rangeBand() + barPadding) / 2);
var y_label = height + 120;
return "translate(" + x_label + "," + y_label + ")";
})
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'middle');
// lines to separate each category_g labels
category_g.append("line")
.attr("x1", function(d) {
return x_category((d.valueLength * x_defect.rangeBand()+ barPadding));
})
.attr("y1", 0)
.attr("x2", function(d) {
return x_category((d.valueLength * x_defect.rangeBand()+ barPadding));
})
.attr("y2", 120)
.attr("transform", function(d) {
var x_label = 0;
var y_label = height;
return "translate(" + x_label + "," + y_label + ")";
})
.style("stroke-width", 1)
.style("stroke", "red")
.style("fill", "none");
// lables for category_g1
var category_label1 = category_g1.selectAll(".category-label1")
.data(function(d) {
return [d];
})
.enter().append("text")
.attr("class", function(d) {
return 'category-label category-label-' + d.key;
})
.attr("transform", function(d) {
var x_label = x_category((d.values.length * x_defect.rangeBand()+ barPadding) / 2);
var y_label = height + 80;
return "translate(" + x_label + "," + y_label + ")";
})
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'middle');
// lines to separate each category_g1 labels
category_g1.append("line")
.attr("x1", function(d) {
return x_category((d.valueLength2* x_defect.rangeBand()+ barPadding));
})
.attr("y1", 0)
.attr("x2", function(d) {
return x_category((d.valueLength2 * x_defect.rangeBand()+ barPadding));
})
.attr("y2", 80)
.attr("transform", function(d) {
var x_label = 0;
var y_label = height;
return "translate(" + x_label + "," + y_label + ")";
})
.style("stroke-width", 1)
.style("stroke", "blue")
.style("fill", "none");
// lables for category_g2
var category_label2 = category_g2.selectAll(".category-label2")
.data(function(d) {
return [d];
})
.enter().append("text")
.attr("class", function(d) {
return 'category-label category-label2-' + d.key;
})
.attr("transform", function(d) {
var x_label = x_category((d.values.length * x_defect.rangeBand()) / 2);
var y_label = height + 50;
return "translate(" + x_label + "," + y_label + ")";
})
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'middle');
// lines to separate each category_g2 labels
category_g2.append("line")
.attr("x1", function(d) {
return x_category((d.values.length* x_defect.rangeBand()+ barPadding));
})
.attr("y1", 0)
.attr("x2", function(d) {
return x_category((d.values.length * x_defect.rangeBand()+ barPadding));
})
.attr("y2", 60)
.attr("transform", function(d) {
var x_label = 0;
var y_label = height;
return "translate(" + x_label + "," + y_label + ")";
})
.style("stroke-width", 1)
.style("stroke", "black")
.style("fill", "none");
// lables for defect_g
var defect_g = category_g2.selectAll(".defect")
.data(function(d) {
return d.values;
})
.enter().append("g")
.attr("class", function(d) {
return 'defect defect-' + d.key;
})
.attr("transform", function(d, i) {
return "translate(" + x_category((i * x_defect.rangeBand())) + ",0)";
});
var defect_label = defect_g.selectAll(".defect-label")
.data(function(d) {
return [d];
})
.enter().append("text")
.attr("class", function(d) {
return 'defect-label defect-label-' + d.key;
})
.attr("transform", function(d) {
var x_label = x_category((x_defect.rangeBand() + barPadding) / 2);
var y_label = height + 10;
return "translate(" + x_label + "," + y_label + "),rotate(-90)";
})
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'middle');
var rects = defect_g.selectAll('.rect')
.data(function(d) {
return [d];
})
.enter().append("rect")
.attr("class", "rect")
.attr("width", x_category(x_defect.rangeBand() - barPadding))
.attr("x", function(d) {
return x_category(barPadding);
})
.attr("y", function(d) {
return y(d.value);
})
.attr("height", function(d) {
return height - y(d.value);
});
// to display values on top of bar chart
defect_g.selectAll("text.bar")
.data(function(d) {
return [d];
})
.enter().append("text")
.attr("class", "rect1")
.attr("text-anchor", "middle")
.attr("x", function(d) { return x_category(x_defect.rangeBand()-barPadding)/2; })
.attr("y", function(d) { return y(d.value); })
.text(function(d) { return d.value+"%"; });<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="https://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="script2.js"></script>
</body>
</html>最佳答案
我认为旋转标签 可以在不重叠的情况下很好地处理区域。
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
或者为了换行:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll(".tick text")
.call(wrap, x.rangeBand());
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 = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
以下是示例:
关于d3.js - d3 中分组类别条形图的 x 轴标签重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37936626/
27
4
0
问题故障解决记录 -- Java RMI Connection refused to host: x.x.x.x .... 在学习JavaRMI时，我遇到了以下情况 问题原因：可
我正在玩 Rank-N-type 并尝试输入 x x .但我发现这两个函数可以以相同的方式输入，这很不直观。 f :: (forall a b. a -> b) -> c f x = x x g ::
这个问题已经有答案了: How do you compare two version Strings in Java? (31 个回答) 已关闭 8 年前。 有谁知道如何在Java中比较两个版本字符串
这个问题已经有答案了: How do the post increment (i++) and pre increment (++i) operators work in Java? (14 个回答)
下面是带有 -n 和 -r 选项的 netstat 命令的输出，其中目标字段显示压缩地址 (127.1/16)。我想知道 netstat 命令是否有任何方法或选项可以显示整个目标 IP (127.1.
我知道要证明 : (¬ ∀ x, p x) → (∃ x, ¬ p x) 证明是: theorem : (¬ ∀ x, p x) → (∃ x, ¬ p x) := begin intro n
x * x 如何通过将其存储在“auto 变量”中来更改？我认为它应该仍然是相同的，并且我的测试表明类型、大小和值显然都是相同的。 但即使 x * x == (xx = x * x) 也是错误的。什么
假设，我们这样表达: someIQueryable.Where(x => x.SomeBoolProperty) someIQueryable.Where(x => !x.SomeBoolProper
我有一个字符串 1234X5678 我使用这个正则表达式来匹配模式 .X|..X|X. 我得到了 34X 问题是为什么我没有得到 4X 或 X5？ 为什么正则表达式选择执行第二种模式？ 最佳答案 这里
我的一个 friend 在面试时遇到了这个问题 找到使该函数返回真值的 x 值 function f(x) { return (x++ !== x) && (x++ === x); } 面试官
这个问题在这里已经有了答案: 10年前关闭。 Possible Duplicate: Isn't it easier to work with foo when it is represented b
我是 android 的新手，我一直在练习开发一个针对 2.2 版本的应用程序，我需要帮助了解如何将我的应用程序扩展到其他版本，即 1.x、2.3.x、3 .x 和 4.x.x，以及一些针对屏幕分辨率
为什么案例 1 给我们 :error: TypeError: x is undefined on line... //case 1 var x; x.push(x); console.log(x);
代码优先: # CASE 01 def test1(x): x += x print x l = [100] test1(l) print l CASE01 输出: [100, 100
我正在努力温习我的大计算。如果我有将所有项目移至 'i' 2 个空格右侧的函数，我有一个如下所示的公式: (n -1) + (n - 2) + (n - 3) ... (n - n) 第一次迭代我必须
给定 IP 字符串(如 x.x.x.x/x)，我如何或将如何计算 IP 的范围最常见的情况可能是 198.162.1.1/24但可以是任何东西，因为法律允许的任何东西。 我要带198.162.1.1/
在我作为初学者努力编写干净的 Javascript 代码时，我最近阅读了 this article当我偶然发现这一段时，关于 JavaScript 中的命名空间: The code at the ve
我正在编写一个脚本，我希望避免污染 DOM 的其余部分，它将是一个用于收集一些基本访问者分析数据的第 3 方脚本。 我通常使用以下内容创建一个伪“命名空间”: var x = x || {}; 我正在
我尝试运行我的test_container_services.py套件，但遇到了以下问题： docker.errors.APIError：500服务器错误：内部服务器错误（“ b'{” message
是否存在这两个 if 语句会产生不同结果的情况？ if(x as X != null) { // Do something } if(x is X) { // Do something } 编
我是一名优秀的程序员,十分优秀！