我正在尝试设计水平直方图,而我只遇到了Mike Bostock的vertical histogram chart。如上所述here,稍微讨厌的解决方案是对包含直方图的元素进行变换旋转。或者不使用d3.layout.histogram()并手动写出代码。在D3中有没有办法按照
的方式做点什么d3.layout.histogram().orient("left")
答案 0 :(得分:5)
您可以在渲染时简单地处理它而不进行任何变换或重新计算。只需将d.x
视为y位置,d.dy
视为宽度而非高度。
在x和y之间交换似乎不合适,但这是完全合理的。甚至还有这样绘制的径向图表的示例,使用x值导出条形角度,y值作为距中心的距离。这是d3布局的巧妙之处;他们不会让你去表示或协调系统 - 他们只是计算关系。
答案 1 :(得分:0)
对于Verti和amp; hori,你可以使用那些2个“全面”的实例,我几乎一直使用性感过渡。
但是仍有一种转变方法在那里动员。
垂直: example
<svg width="550" height="250"></svg>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 60},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.txt", function(d) {
d.value = +d.value;
return d;
}, function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "rotate(-45)")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("x", x(data[0].date))
.style("text-anchor", "end")
.attr("dx", "-1.2em")
.attr("dy", ".01em")
.attr("transform", "rotate(-45)" );
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, "r"))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Frequency");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
//.attr("x", function(d) { return x(d.date); })
//.attr("y", function(d) { return y(d.value); })
.attr('x', function(d) { return getX(d);})
.attr('y', height) /* function(d) { return height; }}) */
.attr("width", x.bandwidth())
.transition()
.duration(500)
.delay(function(d, i) { return i * 35;})
.ease(d3.easeElasticOut)
.attr('y', function(d) { return getY(d); })
.attr('height', function(d) { return height - getY(d);});
//.attr("height", function(d) { return height - y(d.value); });
g.selectAll(".ba")
.data(data)
.enter().append("text")
.attr("x", function(d) { return x(d.date); })
.attr("y", function(d) { return y(d.value); })
.attr("dy", ".90em")
.attr("dx", ".35em")
.attr("class","label_barre")
.text(function(d) { return d.value;});
function type(d) {
d.value = +d.value;
return d;
}
function getName(d) {
return d.date;
}
function getValue(d) {
return d.value;
}
function getX(d) {
return x(d.date);
}
function getY(d) {
return y(d.value);
}
});
</script>
水平:example
<svg width="560" height="400"></svg>
<script>
var width = 560,
height = 400;
var margin = {top: 20, right: 15, bottom: 30, left: 80},
width = width - margin.left - margin.right,
height = height - margin.top - margin.bottom;
var x = d3.scaleLinear().rangeRound([0, height], .05);
var y = d3.scaleBand().rangeRound([height, 0]);
var q = d3.select("svg").append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("Data.txt", function(error, data) {
data.sort(function(a, b) { return a.value - b.value; });
//data.sort(function(a, b) { return a.date - b.date; });
data.forEach(function(d) {
d.date = d.date;
d.value = +d.value;
});
x.domain([0, d3.max(data, function(d) { return d.value; })]);
y.domain(data.map(function(d) { return d.date; })).padding(0.1);
q.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y));
q.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(10))
.append("text")
.attr("transform", "rotate(0)")
.attr("y", -12)
.attr("x", +211)
.attr("dy", "0.71em")
.attr("text-anchor", "middle")
.text("Familles");
q.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
//.attr("x", function(d) { return x(d.date); })
//.attr("y", function(d) { return y(d.value); })
.attr('y', function(d) {return getX(d);})
.attr('x', 0) /* function(d) { return height;}) */
.attr("height", y.bandwidth())
.transition()
.duration(500)
.delay(function(d, i) { return i * 40;})
.ease(d3.easeElasticOut)
.attr('y', function(d) { return getX(d);})
// .attr('width', function(d) { return width - getY(d);});
.attr("width", function(d) { return x(d.value); });
q.selectAll(".ba")
.data(data)
.enter().append("text")
.attr("x", function(d) { return x(d.value); })
.attr("y", function(d) { return y(d.date); })
.attr("dy", "1.4em")
.attr("dx", "-1.1em")
.attr("class","label")
.text(function(d) { return d.value;});
//function type(d) {
//d.value = +d.value;
//return d;
//}
//function getName(d) {
//return d.date;
//}
function getValue(d) {
return d.value;
}
function getX(d) {
return y(d.date);
}
//function getY(d) {
//return x(d.value);
//}
});