如何避免标签显示在堆积的条形图上？

时间：2020-02-25 15:55:04

标签： javascript d3.js

嗨，我有一个使用d3js v4开发的堆叠条形图。我需要一些帮助来修复它。当前是这样显示的。

enter image description here

我想修复以下问题 1）当前未显示总计数，我想显示每个小节的总计数 2）是不显示y轴 3）标签重叠在图片的第三栏中。我想避免这种情况

enter image description here

以下是我的代码

// create the svg

  const margin = {top: 20, right: 20, bottom: 60, left: 60},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  const svg = d3.select("div#histogramHolder").append("svg")
               .attr("width", width + margin.left + margin.right)
               .attr("height", height + margin.top + margin.bottom)
               .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 var g = svg.append("g");
// set x scale
var x = d3.scaleBand()
  .rangeRound([0, width])
  .paddingInner(0.05)
  .align(0.1);

// set y scale
var y = d3.scaleLinear()
  .rangeRound([height, 0]);

// set the colors
var z = d3.scaleOrdinal()
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

let data  = [
{ "State":"AL",
  "Under 5 Years": 150,
  "5 to 13 Years": 50,
  "14 to 17 Years": 100,
  "18 to 24 Years": 250,
  "25 to 44 Years": 300,
  "45 to 64 Years": 300,
  "65 Years and Over": 250,
   "total": 1400
},

{  "State":"AK",
  "Under 5 Years":"250",
  "5 to 13 Years":"300",
  "14 to 17 Years":"300",
  "18 to 24 Years":"250",
  "25 to 44 Years":"100",
  "45 to 64 Years":"50",
  "65 Years and Over":"150",
  "total": 1400
},
{  "State":"AG",
  "Under 5 Years":"250",
  "5 to 13 Years":"300",
  "14 to 17 Years":"300",
  "18 to 24 Years":"250",
  "25 to 44 Years":"100",
  "45 to 64 Years":"50",
  "65 Years and Over":"150",
  "total": 1400
}
];

// keys["Under 5 Years","5 to 13 Years","14 to 17 Years","18 to 24 Years","25 to 44 Years","45 to 64 Years","65 Years and Over"]


var keys  = ["Under 5 Years", "5 to 13 Years" ,"14 to 17 Years","18 to 24 Years","25 to 44 Years","45 to 64 Years","65 Years and Over"];

data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.State; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
z.domain(keys);

g.append("g")
  .selectAll("g")
  .data(d3.stack().keys(keys)(data))
  .enter().append("g")
    .attr("fill", function(d) { return z(d.key); })
  .selectAll("rect")
  .data(function(d) { return d; })
  .enter().append("rect")
    .attr("x", function(d) { return x(d.data.State); })
    .attr("y", function(d) { return y(d[1]); })
    .attr("height", function(d) { return y(d[0]) - y(d[1]); })
    .attr("width", x.bandwidth())
  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {
    //console.log(d);
    var xPosition = d3.mouse(this)[0] - 5;
    var yPosition = d3.mouse(this)[1] - 5;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d[1]-d[0]);
  });

g.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

g.append("g")
    .attr("class", "axis")
    .call(d3.axisLeft(y).ticks(null, "s"))
  .append("text")
    .attr("x", 2)
    .attr("y", y(y.ticks().pop()) + 0.5)
    .attr("dy", "0.32em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("text-anchor", "start");

var legend = g.append("g")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .attr("text-anchor", "end")
  .selectAll("g")
  .data(keys.slice().reverse())
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
    .attr("x", width - 19)
    .attr("width", 19)
    .attr("height", 19)
    .attr("fill", z);

legend.append("text")
    .attr("x", width - 24)
    .attr("y", 9.5)
    .attr("dy", "0.32em")
    .text(function(d) { return d; });


// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
  .attr("class", "tooltip")
  .style("display", "none");

tooltip.append("rect")
  .attr("width", 60)
  .attr("height", 20)
  .attr("fill", "white")
  .style("opacity", 0.5);

tooltip.append("text")
  .attr("x", 30)
  .attr("dy", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold");
body {
      font-family: 'Open Sans', sans-serif;
    }
    #main {
      width: 960px;
    }
    .axis .domain {
      display: none;
    }
<!DOCTYPE html>
<div id="histogramHolder">
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>

非常感谢您能提供帮助

谢谢

1 个答案:

答案 0 :(得分：0)

当前不显示总数，我想显示 每个小节的总计数

我添加了总数，但您的数据总数相同。

2）是不显示y轴。

只需删除.domain CSS选择器即可。

3）标签重叠在图片的第三栏上。我想要 避免这种情况

解决了正确处理margin padding D3模式的问题。

修复了以下代码段中存在的问题：

const margin = { top: 20, right: 160, bottom: 60, left: 60 },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

const svg = d3
  .select("div#histogramHolder")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
{
  {
    /* var g = svg.append("g"); */
  }
}
const g = svg
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// set x scale
var x = d3
  .scaleBand()
  .rangeRound([0, width])
  .paddingInner(0.05)
  .align(0.1);

// set y scale
var y = d3.scaleLinear().rangeRound([height, 0]);

// set the colors
var z = d3
  .scaleOrdinal()
  .range([
    "#98abc5",
    "#8a89a6",
    "#7b6888",
    "#6b486b",
    "#a05d56",
    "#d0743c",
    "#ff8c00"
  ]);

let data = [
  {
    State: "AL",
    "Under 5 Years": 150,
    "5 to 13 Years": 50,
    "14 to 17 Years": 100,
    "18 to 24 Years": 250,
    "25 to 44 Years": 300,
    "45 to 64 Years": 300,
    "65 Years and Over": 250,
    total: 1400
  },

  {
    State: "AK",
    "Under 5 Years": "250",
    "5 to 13 Years": "300",
    "14 to 17 Years": "300",
    "18 to 24 Years": "250",
    "25 to 44 Years": "100",
    "45 to 64 Years": "50",
    "65 Years and Over": "150",
    total: 1400
  },
  {
    State: "AG",
    "Under 5 Years": "250",
    "5 to 13 Years": "300",
    "14 to 17 Years": "300",
    "18 to 24 Years": "250",
    "25 to 44 Years": "100",
    "45 to 64 Years": "50",
    "65 Years and Over": "150",
    total: 1400
  }
];

var keys = [
  "Under 5 Years",
  "5 to 13 Years",
  "14 to 17 Years",
  "18 to 24 Years",
  "25 to 44 Years",
  "45 to 64 Years",
  "65 Years and Over"
];

data.sort(function(a, b) {
  return b.total - a.total;
});
x.domain(
  data.map(function(d) {
    return d.State;
  })
);
y.domain([
  0,
  d3.max(data, function(d) {
    return d.total;
  })
]).nice();
z.domain(keys);

g.append("g")
  .selectAll("g")
  .data(d3.stack().keys(keys)(data))
  .enter()
  .append("g")
  .attr("fill", function(d) {
    return z(d.key);
  })
  .selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("rect")
  .attr("x", function(d) {
    return x(d.data.State);
  })
  .attr("y", function(d) {
    return y(d[1]);
  })
  .attr("height", function(d) {
    return y(d[0]) - y(d[1]);
  })
  .attr("width", x.bandwidth())
  .on("mouseover", function() {
    tooltip.style("display", null);
  })
  .on("mouseout", function() {
    tooltip.style("display", "none");
  })
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] - 5;
    var yPosition = d3.mouse(this)[1] - 5;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d[1] - d[0]);
  });

g.append("g")
  .selectAll(".total-text")
  .data(data)
  .enter()
  .append("text")
  .attr("x", function(d) {
    return x(d.State) + x.bandwidth() / 2;
  })
  .attr("y", function(d) {
    return -10;
  })
  .attr("dy", "0.32em")
  .text(function(d) {
    return d.total;
  })
  .style("text-anchor", "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold");

g.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

g.append("g")
  .attr("class", "axis")
  .call(d3.axisLeft(y).ticks(null, "s"))
  .append("text")
  .attr("x", 2)
  .attr("y", y(y.ticks().pop()) + 0.5)
  .attr("dy", "0.32em")
  .attr("fill", "#000")
  .attr("font-weight", "bold")
  .attr("text-anchor", "start");

var legend = g
  .append("g")
  .attr("font-family", "sans-serif")
  .attr("font-size", 10)
  .attr("text-anchor", "end")
  .selectAll("g")
  .data(keys.slice().reverse())
  .enter()
  .append("g")
  .attr("transform", function(d, i) {
    return "translate(160," + i * 20 + ")";
  });

legend
  .append("rect")
  .attr("x", width - 19)
  .attr("width", 19)
  .attr("height", 19)
  .attr("fill", z);

legend
  .append("text")
  .attr("x", width - 24)
  .attr("y", 9.5)
  .attr("dy", "0.32em")
  .text(function(d) {
    return d;
  });

// Prep the tooltip bits, initial display is hidden
var tooltip = svg
  .append("g")
  .attr("class", "tooltip")
  .style("display", "none");

tooltip
  .append("rect")
  .attr("width", 60)
  .attr("height", 20)
  .attr("fill", "white")
  .style("opacity", 0.5);

tooltip
  .append("text")
  .attr("x", 30)
  .attr("dy", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold");
body {
  font-family: 'Open Sans', sans-serif;
}
#main {
  width: 960px;
}
<!DOCTYPE html>
<div id="histogramHolder">
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>

相关问题
最新问题