[英]D3.js horizontal histogram
您可以在渲染时简单地处理它,而无需任何变换或重新计算。 只需将dx
视为y位置,将d.dy
视为宽度而不是高度。
在x和y之间交换似乎不合适,但这是完全合理的。 甚至还有以这种方式绘制的径向图的示例,使用x值得出钢筋的角度,将y值用作距中心的距离。 这就是d3布局的精妙之处。 他们不会将您委托给制图表达或坐标系统-他们只是计算关系。
对于verti和hori,您都可以使用这2个“全面”的实例,而我经常在性感过渡期间使用它们。
但是,在那里仍然有一种转换方法。
垂直: 示例
<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>
水平: 示例
<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);
//}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.