D3.js 如何将d3图例定位在x轴下方 身体{ 字体:10px无衬线; } .轴线路径, .轴线{ 填充:无; 行程:#000; 形状渲染:边缘清晰; } .酒吧{ 填充:钢蓝; } .x轴路径{ 显示:无; } .图例线{ 行程:#000; 形状渲染:边缘清晰; } var margin={顶部:20,右侧:100,底部:30,左侧:40}, 宽度=960-margin.left-margin.right, 高度=500-margin.top-margin.bottom; var x=d3.scale.ordinal() .rangeRoundBands([0,宽度],.1); 变量y=d3.scale.linear() .rangeRound([高度,0]); var color=d3.scale.ordinal() .范围([“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”); var xAxis=d3.svg.axis() .比例(x) .东方(“底部”); var yAxis=d3.svg.axis() .比例(y) .东方(“左”) .0%格式(d3.格式(“.0%”); var svg=d3.选择(“正文”).追加(“svg”) .attr(“宽度”,宽度+边距。左侧+边距。右侧) .attr(“高度”,高度+边距。顶部+边距。底部) .附加(“g”) .attr(“转换”、“平移”(+margin.left+)、“+margin.top+”); d3.csv(“data.csv”,函数(错误,数据){ 域(d3.keys(数据[0]).filter(函数(键){returnkey!==“State”}); data.forEach(函数(d){ var y0=0; d、 ages=color.domain().map(函数(名称){return{name:name,y0:y0,y1:y0+=+d[name]};}); d、 forEach(函数(d){d.y0/=y0;d.y1/=y0;}); }); sort(函数(a,b){返回b.ages[0].y1-a.ages[0].y1;}); x、 域(data.map(函数(d){返回d.State;})); svg.append(“g”) .attr(“类”、“x轴”) .attr(“变换”、“平移(0)”、“高度+”) .呼叫(xAxis); svg.append(“g”) .attr(“类”、“y轴”) .呼叫(yAxis); var state=svg.selectAll(“.state”) .数据(数据) .enter().append(“g”) .attr(“类别”、“状态”) .attr(“transform”,函数(d){return”translate(“+x(d.State)+”,0)”;}); state.selectAll(“rect”) .data(函数(d){返回d.age;}) .enter().append(“rect”) .attr(“宽度”,x.rangeBand()) .attr(“y”,函数(d){返回y(d.y1);}) .attr(“高度”,函数(d){返回y(d.y0)-y(d.y1);}) .style(“fill”,函数(d){返回颜色(d.name);}); var legend=svg.select(“.state:last child”).selectAll(“.legend”) .data(函数(d){返回d.age;}) .enter().append(“g”) .attr(“类”、“图例”) .attr(“transform”,函数(d){return”translate(“+x.rangeBand()/2+”,“+y((d.y0+d.y1)/2)+”);); 图例。追加(“行”) .attr(“x2”,10); 图例。追加(“文本”) .attr(“x”,13) .attr(“dy”,“.35em”) .text(函数(d){返回d.name;}); });
如何将图例放置在x轴下方。 如何添加为矩形。 就像这个链接中的图例一样D3.js 如何将d3图例定位在x轴下方 身体{ 字体:10px无衬线; } .轴线路径, .轴线{ 填充:无; 行程:#000; 形状渲染:边缘清晰; } .酒吧{ 填充:钢蓝; } .x轴路径{ 显示:无; } .图例线{ 行程:#000; 形状渲染:边缘清晰; } var margin={顶部:20,右侧:100,底部:30,左侧:40}, 宽度=960-margin.left-margin.right, 高度=500-margin.top-margin.bottom; var x=d3.scale.ordinal() .rangeRoundBands([0,宽度],.1); 变量y=d3.scale.linear() .rangeRound([高度,0]); var color=d3.scale.ordinal() .范围([“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”); var xAxis=d3.svg.axis() .比例(x) .东方(“底部”); var yAxis=d3.svg.axis() .比例(y) .东方(“左”) .0%格式(d3.格式(“.0%”); var svg=d3.选择(“正文”).追加(“svg”) .attr(“宽度”,宽度+边距。左侧+边距。右侧) .attr(“高度”,高度+边距。顶部+边距。底部) .附加(“g”) .attr(“转换”、“平移”(+margin.left+)、“+margin.top+”); d3.csv(“data.csv”,函数(错误,数据){ 域(d3.keys(数据[0]).filter(函数(键){returnkey!==“State”}); data.forEach(函数(d){ var y0=0; d、 ages=color.domain().map(函数(名称){return{name:name,y0:y0,y1:y0+=+d[name]};}); d、 forEach(函数(d){d.y0/=y0;d.y1/=y0;}); }); sort(函数(a,b){返回b.ages[0].y1-a.ages[0].y1;}); x、 域(data.map(函数(d){返回d.State;})); svg.append(“g”) .attr(“类”、“x轴”) .attr(“变换”、“平移(0)”、“高度+”) .呼叫(xAxis); svg.append(“g”) .attr(“类”、“y轴”) .呼叫(yAxis); var state=svg.selectAll(“.state”) .数据(数据) .enter().append(“g”) .attr(“类别”、“状态”) .attr(“transform”,函数(d){return”translate(“+x(d.State)+”,0)”;}); state.selectAll(“rect”) .data(函数(d){返回d.age;}) .enter().append(“rect”) .attr(“宽度”,x.rangeBand()) .attr(“y”,函数(d){返回y(d.y1);}) .attr(“高度”,函数(d){返回y(d.y0)-y(d.y1);}) .style(“fill”,函数(d){返回颜色(d.name);}); var legend=svg.select(“.state:last child”).selectAll(“.legend”) .data(函数(d){返回d.age;}) .enter().append(“g”) .attr(“类”、“图例”) .attr(“transform”,函数(d){return”translate(“+x.rangeBand()/2+”,“+y((d.y0+d.y1)/2)+”);); 图例。追加(“行”) .attr(“x2”,10); 图例。追加(“文本”) .attr(“x”,13) .attr(“dy”,“.35em”) .text(函数(d){返回d.name;}); });,d3.js,D3.js,如何将图例放置在x轴下方。 如何添加为矩形。 就像这个链接中的图例一样 有人能解释一下转换的细节吗?你不理解转换的哪一部分?.attr(“转换”,函数(d){return”translate(“+x.rangeBand()/2+”,“+y((d.y0+d.y1)/2)+”);该代码不会出现在您链接到的示例中的任何位置。你不是要我们向你解释你自己的代码吧? <!DOCTYPE html> <meta charset="utf-8"> <style> body
有人能解释一下转换的细节吗?你不理解转换的哪一部分?.attr(“转换”,函数(d){return”translate(“+x.rangeBand()/2+”,“+y((d.y0+d.y1)/2)+”);该代码不会出现在您链接到的示例中的任何位置。你不是要我们向你解释你自己的代码吧?
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
.legend line {
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 100, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".0%"));
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 + ")");
d3.csv("data.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
});
data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; });
x.domain(data.map(function(d) { return d.State; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "state")
.attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
state.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
var legend = svg.select(".state:last-child").selectAll(".legend")
.data(function(d) { return d.ages; })
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d) { return "translate(" + x.rangeBand() / 2 + "," + y((d.y0 + d.y1) / 2) + ")"; });
legend.append("line")
.attr("x2", 10);
legend.append("text")
.attr("x", 13)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
});
</script>