【发布时间】：2018-11-27 03:38:19
【问题描述】：
使用 D3 v4 创建图表。我在互联网上找到了这个示例分组图表。它使用的是 d3 v3，所以我将它转换为 D3 v4。 现在我想减少组条形图中的空间黑白条。我该怎么做？
我想并排放置条形。条之间不应有空间。它们应该彼此相邻。
codepen 的链接 - https://codepen.io/pinkisharma/pen/OEOdRw
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [
{
"categorie": "Student",
"values": [
{
"value": 0,
"rate": "Not at all"
},
{
"value": 4,
"rate": "Not very much"
},
{
"value": 12,
"rate": "Medium"
},
{
"value": 6,
"rate": "Very much"
},
{
"value": 0,
"rate": "Tremendously"
}
]
},
{
"categorie": "Liberal Profession",
"values": [
{
"value": 1,
"rate": "Not at all"
},
{
"value": 21,
"rate": "Not very much"
},
{
"value": 13,
"rate": "Medium"
},
{
"value": 18,
"rate": "Very much"
},
{
"value": 6,
"rate": "Tremendously"
}
]
},
{
"categorie": "Salaried Staff",
"values": [
{
"value": 3,
"rate": "Not at all"
},
{
"value": 22,
"rate": "Not very much"
},
{
"value": 6,
"rate": "Medium"
},
{
"value": 15,
"rate": "Very much"
},
{
"value": 3,
"rate": "Tremendously"
}
]
},
{
"categorie": "Employee",
"values": [
{
"value": 12,
"rate": "Not at all"
},
{
"value": 7,
"rate": "Not very much"
},
{
"value": 18,
"rate": "Medium"
},
{
"value": 13,
"rate": "Very much"
},
{
"value": 6,
"rate": "Tremendously"
}
]
},
{
"categorie": "Craftsman",
"values": [
{
"value": 6,
"rate": "Not at all"
},
{
"value": 15,
"rate": "Not very much"
},
{
"value": 9,
"rate": "Medium"
},
{
"value": 12,
"rate": "Very much"
},
{
"value": 3,
"rate": "Tremendously"
}
]
},
{
"categorie": "Inactive",
"values": [
{
"value": 6,
"rate": "Not at all"
},
{
"value": 6,
"rate": "Not very much"
},
{
"value": 6,
"rate": "Medium"
},
{
"value": 2,
"rate": "Very much"
},
{
"value": 3,
"rate": "Tremendously"
}
]
}
];
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scaleBand()
.rangeRound([0, width], .1);
var x1 = d3.scaleBand();
var y = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.axisBottom(x0)
.tickSize(0);
var yAxis = d3.axisLeft(y);
var color = d3.scaleOrdinal()
.range(["#ca0020","#f4a582","#d5d5d5","#92c5de","#0571b0"]);
var svg = d3.select('body').append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data.forEach(function(d) {
var categoriesNames = data.map(function(d) { return d.categorie; });
var rateNames = data[0].values.map(function(d) { return d.rate; });
x0.domain(categoriesNames);
x1.domain(rateNames).range([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(categorie) { return d3.max(categorie.values, function(d) { return d.value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.style('opacity','0')
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style('font-weight','bold')
.text("Value");
svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');
var slice = svg.selectAll(".slice")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform",function(d) { return "translate(" + x0(d.categorie) + ",0)"; });
slice.selectAll("rect")
.data(function(d) { return d.values; })
.enter().append("rect")
.attr("width", 10)
.attr("x", function(d) { return x1(d.rate); })
.attr('dy', '0.32em')
.style("fill", function(d) { return color(d.rate) })
.attr("y", function(d) { return y(0); })
.attr("height", function(d) { return height - y(0); })
.on("mouseover", function(d) {
d3.select(this).style("fill", d3.rgb(color(d.rate)).darker(2));
})
.on("mouseout", function(d) {
d3.select(this).style("fill", color(d.rate));
});
slice.selectAll("rect")
.transition()
.delay(function (d) {return Math.random()*1000;})
.duration(1000)
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });
//Legend
var legend = svg.selectAll(".legend")
.data(data[0].values.map(function(d) { return d.rate; }).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d,i) { return "translate(0," + i * 20 + ")"; })
.style("opacity","0");
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) { return color(d); });
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {return d; });
legend.transition().duration(500).delay(function(d,i){ return 1300 + 100 * i; }).style("opacity","1");
});
</script>
【问题讨论】：
-
另外，我想在这个图表上添加工具提示。
-
在您的情况下，您只需将宽度添加到切片变量并将
.padding(0.1)添加到x0变量，但是硬编码宽度不是一个好方法，我会从 Mike Bostocks example 开始，然后添加您想要的功能。 -
@PinkiSharma 请保留每个问题 一个 问题。另外，请注意，“我想在此图表上添加工具提示” 非常宽泛，并且会这样关闭：而不是那样，向我们展示您尝试添加工具提示的内容，并且出了什么问题。
标签： javascript d3.js