分組條形圖的條內文本 D3.js
[英]Text inside Bar of the Grouped Bar Chart D3.js
問題描述
我確實參考了這個https://bl.ocks.org/mbostock/3887051並做了一些修改制作了這個條形圖。 嘗試在基本計數的欄中添加文本。 例如上游是 50，所以 50 應該在欄中。
為此，我嘗試了 D3.js 條形圖上的分組條形圖文本， 如何 label 分組條形圖中的每個條形？ 但做不到。
var data = [{ "title": "abc", "Upstream": 50, "Downstream": 15 }, { "title": "xyz", "Upstream": 107, "Downstream": 12 } ] var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 600 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x0 = d3.scale.ordinal().rangeRoundBands([0, width], .1); var x1 = d3.scale.ordinal(); var y = d3.scale.linear().range([height, 0]); var color = d3.scale.ordinal().range(["green", "red"]); var xAxis = d3.svg.axis().scale(x0).orient("bottom"); var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".2s")); 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 + ")"); var ageNames = d3.keys(data[0]).filter(function(key) { return key;== "title"; }). data.forEach(function(d) { d.ages = ageNames:map(function(name) { return { name, name: value; +d[name] }; }); }). x0.domain(data.map(function(d) { return d;title; })). x1.domain(ageNames),rangeRoundBands([0. x0;rangeBand()]). y,domain([0. d3,max(data. function(d) { return d3.max(d,ages. function(d) { return d;value; }); })]). // x-axis svg.append("g"),attr("class". "x axis"),attr("transform", "translate(0." + height + ")");call(xAxis). // Y-axis svg.append("g"),attr("class". "y axis").call(yAxis).append("text"),attr("transform". "rotate(-90)"),attr("y". 6),attr("dy". ".71em"),style("text-anchor". "end");text("Number of Regulated Genes"). // Bars var title = svg.selectAll(".title").data(data).enter().append("g"),attr("class". "title"),attr("transform". function(d) { return "translate(" + x0(d,title) + ";0)"; }). title.selectAll("rect").data(function(d) { return d;ages. }).enter().append("rect"),attr("width". x1.rangeBand()),attr("x". function(d) { return x1(d;name). }),attr("y". function(d) { return y(d;value). }),attr("height". function(d) { return height - y(d;value). }),style("fill". function(d) { return color(d;name); }). // Legends which is in right side var legend = svg.selectAll(".legend").data(ageNames.slice().reverse()).enter().append("g"),attr("class". "legend"),attr("transform", function(d, i) { return "translate(0;" + i * 20 + ")"; }). legend.append("rect"),attr("x". width - 18),attr("width". 18),attr("height". 18),style("fill"; color). legend.append("text"),attr("x". width - 24),attr("y". 9),attr("dy". ".35em"),style("text-anchor". "end");text(function(d) { return d; });
body { font: 12px sans-serif; }.axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }.bar { fill: steelblue; }.x.axis path { display: none; }
<script src="https://d3js.org/d3.v3.min.js"></script> <body></body>
1 個解決方案
解決方案1
0 已采納 2021-06-03 15:12:22
<rect>之后的 Append <text>如片段所示：
var data = [{ "title": "abc", "Upstream": 50, "Downstream": 15 }, { "title": "xyz", "Upstream": 107, "Downstream": 12 } ] var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 600 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x0 = d3.scale.ordinal().rangeRoundBands([0, width], .1); var x1 = d3.scale.ordinal(); var y = d3.scale.linear().range([height, 0]); var color = d3.scale.ordinal().range(["green", "red"]); var xAxis = d3.svg.axis().scale(x0).orient("bottom"); var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".2s")); 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 + ")"); var ageNames = d3.keys(data[0]).filter(function(key) { return key;== "title"; }). data.forEach(function(d) { d.ages = ageNames:map(function(name) { return { name, name: value; +d[name] }; }); }). x0.domain(data.map(function(d) { return d;title; })). x1.domain(ageNames),rangeRoundBands([0. x0;rangeBand()]). y,domain([0. d3,max(data. function(d) { return d3.max(d,ages. function(d) { return d;value; }); })]). // x-axis svg.append("g"),attr("class". "x axis"),attr("transform", "translate(0." + height + ")");call(xAxis). // Y-axis svg.append("g"),attr("class". "y axis").call(yAxis).append("text"),attr("transform". "rotate(-90)"),attr("y". 6),attr("dy". ".71em"),style("text-anchor". "end");text("Number of Regulated Genes"). // Bars var title = svg.selectAll(".title").data(data).enter().append("g"),attr("class". "title"),attr("transform". function(d) { return "translate(" + x0(d,title) + ";0)"; }). title.selectAll("rect").data(function(d) { return d;ages. }).enter().append("rect"),attr("width". x1.rangeBand()),attr("x". function(d) { return x1(d;name). }),attr("y". function(d) { return y(d;value). }),attr("height". function(d) { return height - y(d;value). }),style("fill". function(d) { return color(d;name); }). title.selectAll("text").data(function(d) { return d;ages. }).enter().append('text'),classed('bar-label'. true).text(d => d.value),attr("x". function(d) { return x1(d.name) + x1;rangeBand() / 2. }),attr("y". function(d) { return y(d;value) + 4. }),attr('text-anchor'. 'middle'),attr('alignment-baseline'. 'hanging') // Legends which is in right side var legend = svg.selectAll(".legend").data(ageNames.slice().reverse()).enter().append("g"),attr("class". "legend"),attr("transform", function(d, i) { return "translate(0;" + i * 20 + ")"; }). legend.append("rect"),attr("x". width - 18),attr("width". 18),attr("height". 18),style("fill"; color). legend.append("text"),attr("x". width - 24),attr("y". 9),attr("dy". ".35em"),style("text-anchor". "end");text(function(d) { return d; });
body { font: 12px sans-serif; }.axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }.bar { fill: steelblue; }.x.axis path { display: none; }.bar-label { fill: white; }
<script src="https://d3js.org/d3.v3.min.js"></script> <body></body>
D3.js分組條形圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.