我想创建两个一维频率分布图(请参阅 this example )并将它们放在一起(在一行中)。
这是我的 fiddle .
问题是只有第一个一维图表出现，而第二个一维图表不可见。
我应该为每个 bar 创建一个单独的 svg 元素，还是可以将不同的 bar 添加到同一个 svg 中？
var bar1 = svg1.selectAll(".bar")
.data(data1)
.enter().append("g")
.attr("class", "bar1")
.attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; });
var bar2 = svg2.selectAll(".bar")
.data(data2)
.enter().append("g")
.attr("class", "bar1")
.attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; });
最佳答案
这一行:
.attr("transform", "translate(" + 100+margin.left + "," + margin.top + ")");
给你带来麻烦了。 JavaScript 从左到右解析它，并将整个事情视为字符串连接，因此它的计算结果为:
<g transform="translate(10030,10)">
您的意思可能是:
.attr("transform", "translate(" + (100+margin.left) + "," + margin.top + ")");
这将在字符串连接之前将 (100+margin.left) 计算为数字表达式。
清理示例:
var values1 = [48,119,92,53,58,84,56,54,141,176,23,78,55,32,53,71,45,85,41,74,80]
var values2 = [18,19,12,13,18,14,16,14,14,16,23,18,15,12,13,11,15,15,11,14,8]
// A formatter for counts.
var formatCount = d3.format(",.0f");
var margin = {top: 10, right: 30, bottom: 30, left: 30},
width = 300 - margin.left - margin.right,
height = 100 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 150])
.range([0, width]);
// Generate a histogram using sixty uniformly-spaced bins.
var data1 = d3.layout.histogram()
.bins(x.ticks(60))
(values1);
var data2 = d3.layout.histogram()
.bins(x.ticks(60))
(values2);
var opacity = d3.scale.linear()
.domain([0, d3.max(data1, function(d) { return d.y; })])
.range(["white", "blue"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
<!-- The 1st 1D histogram -->
var svg1 = d3.select("body").append("svg").style('float','left')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bar1 = svg1.selectAll(".bar")
.data(data1)
.enter().append("g")
.attr("class", "bar1")
.attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; });
bar1.append("rect")
.attr("x", 0)
.attr("width", x(data1[0].dx) )
.attr("height", 50)
.style("fill", function(d){ return opacity(d.y)})
svg1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
<!-- The 2nd 1D histogram -->
var svg2 = d3.select("body").append('div').append("svg").style('float','left')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bar2 = svg2.selectAll(".bar")
.data(data2)
.enter().append("g")
.attr("class", "bar2")
.attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; });
bar2.append("rect")
.attr("x", 0)
.attr("width", x(data2[0].dx) )
.attr("height", 50)
.style("fill", function(d){ return opacity(d.y)})
svg2.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);body {
font: 10px sans-serif;
}
.bar rect {
fill: steelblue;
shape-rendering: crispEdges;
}
.bar text {
fill: #fff;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}<body></body>
<script src="https://d3js.org/d3.v3.min.js"></script>关于javascript - 如何将两个一维频率分布图放在一起？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42350718/