d3js v4 x-axis-label 存在但不可见

Question

我需要使条形图的 x 轴标签（以及 y 轴标签）可见。在这种情况下，y-axis-label必须是：“失业率”，x-axis-label：越南的地区。通过 Chrome 的检查工具，我证明这些元素在那里，但它们只是被隐藏了。例如，y 轴标签：

• 创建了 y 轴标签的 HTML SVG 文本元素
• 显示屏显示此元素的选定区域
• 此元素的颜色是红色（我在 Chrome 中手动制作），与背景颜色不同。

截图和代码放在下面。我知道这一定是一些愚蠢的错误，但不幸的是我无法在 1 天后自己弄清楚。请帮忙。

JSfidle 链接：https ://jsfiddle.net/ngminhtrung/703exxc0/

var data = [{
    "area": "??ng b?ng sông H?ng",
    "age1": 9.62,
    "age2": 1.45,
    "age3": 20
  },
  {
    "area": "Trung du và mi?n núi phía B?c",
    "age1": 2.95,
    "age2": 20,
    "age3": 20
  },
  {
    "area": "B?c Trung B? và duyên h?i mi?n Trung",
    "age1": 8.26,
    "age2": 20,
    "age3": 20
  },
  {
    "area": "Tây Nguyên",
    "age1": 2.47,
    "age2": 20,
    "age3": 20
  },
  {
    "area": "?ông Nam B?",
    "age1": 8.02,
    "age2": 20,
    "age3": 20
  },
  {
    "area": "??ng b?ng sông C?u Long",
    "age1": 8.19,
    "age2": 20,
    "age3": 20
  }
];

var w = data.length * 100;
var h = 600;
var barHeight = 30;
var margin = {
  top: 100,
  bottom: 200,
  left: 150,
  right: 100
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var formatAsPercentage = d3.format(".1%");

var x = d3.scaleBand()
  .domain(data.map(function(entry) {
    return entry.area;
  }))
  .range([0, width]);


var y = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) {
    return d.age1;
  })])
  .range([height, 0]);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y);

var ordinalColorScale = d3.scaleOrdinal(d3.schemeCategory10);

var yGridlines = d3.axisLeft(y)
  .tickSize(-width, 0, 0)
  .tickFormat("");

var svg = d3.select("body").append("svg")
  .attr("id", "chart")
  .attr("width", w)
  .attr("height", h);

var chart = svg.append("g")
  .classed("display", true)
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


chart.append("g")
  .call(yGridlines)
  .classed("gridline", true)
  .attr("transform", "translate(0,0)");

chart.selectAll(".bar")
  .data(data)
  .enter()
  .append("rect")
  .classed("bar", true)
  .attr("x", function(d, i) {
    return x(d.area) + 1;
  })
  .attr("y", function(d, i) {
    return y(d.age1);
  })
  .attr("height", function(d) {
    return height - y(d.age1);
  })
  .attr("width", function(d) {
    return x.bandwidth() - 1;
  })
  .style("fill", function(d, i) {
    return ordinalColorScale(i);
  });

chart.selectAll(".bar-label")
  .data(data)
  .enter()
  .append("text")
  .classed("bar-label", true)
  .attr("x", function(d, i) {
    return x(d.area) + x.bandwidth();
  })
  .attr("dx", -30)
  .attr("y", function(d, i) {
    return y(d.age1);
  })
  .attr("dy", 18)
  .style("font-size", "12px")
  .text(function(d) {
    return d.age1;
  });

chart.append("g")
  .classed("x axis", true)
  .attr("transform", "translate(" + 0 + "," + (height + 2) + ")")
  .call(xAxis)
  .selectAll("text")
  .classed("x-axis-label", true)
  .style("text-anchor", "start")
  .attr("dx", 8)
  .attr("dy", 10)
  .attr("transform", "rotate(45)")
  .style("font-size", "12px")

chart.append("g")
  .classed("y axis", true)
  .attr("transform", "translate(-3,0)")
  .call(yAxis)

//This is the y label
chart.select(".y.axis")
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin.left / 2)
  .attr("x", 0 - (height / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("Unemployment Rate");

//This is the x label
chart.select(".x.axis")
  .append("text")
  .attr("x", 0)
  .attr("y", 0)
  .style("text-anchor", "middle")
  .attr("transform", "translate(" + width / 2 + ",80)")
  .text("Regions in Vietnam");

body,
html {
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
  font-size: 0.95em;
  text-align: center;
}

#chart {
  background-color: #F5F2EB;
  border: 1px solid #CCC;
}

.bar {
  fill: purple;
  shape-rendering: crispEdges;
}

.bar-label {
  fill: #000;
  text-anchor: middle;
  font-size: 18px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.gridline path,
.gridline line {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

<body>



</body>

Answer 1

这里的解释很简单：轴生成器创建了一个样式为 的组元素fill= "none"。

看看它：

<g class="y axis" transform="translate(-3,0)" fill="none" font-size="10" etc...>
//fill "none" here -----------------------------------^

您附加到该组的任何文本都会继承该样式，因此没有fill. 它确实在那里，它没有隐藏，但是因为它没有填充，所以你看不到它。

解决方法很简单，只需执行以下操作：

.style("fill", "red")

这是您仅进行该更改的代码：

<g class="y axis" transform="translate(-3,0)" fill="none" font-size="10" etc...>
//fill "none" here -----------------------------------^

.style("fill", "red")

var data = [{
    "area": "??ng b?ng sông H?ng",
    "age1": 9.62,
    "age2": 1.45,
    "age3": 20
  },
  {
    "area": "Trung du và mi?n núi phía B?c",
    "age1": 2.95,
    "age2": 20,
    "age3": 20
  },
  {
    "area": "B?c Trung B? và duyên h?i mi?n Trung",
    "age1": 8.26,
    "age2": 20,
    "age3": 20
  },
  {
    "area": "Tây Nguyên",
    "age1": 2.47,
    "age2": 20,
    "age3": 20
  },
  {
    "area": "?ông Nam B?",
    "age1": 8.02,
    "age2": 20,
    "age3": 20
  },
  {
    "area": "??ng b?ng sông C?u Long",
    "age1": 8.19,
    "age2": 20,
    "age3": 20
  }
];

var w = data.length * 100;
var h = 600;
var barHeight = 30;
var margin = {
  top: 100,
  bottom: 200,
  left: 150,
  right: 100
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var formatAsPercentage = d3.format(".1%");

var x = d3.scaleBand()
  .domain(data.map(function(entry) {
    return entry.area;
  }))
  .range([0, width]);


var y = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) {
    return d.age1;
  })])
  .range([height, 0]);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y);

var ordinalColorScale = d3.scaleOrdinal(d3.schemeCategory10);

var yGridlines = d3.axisLeft(y)
  .tickSize(-width, 0, 0)
  .tickFormat("");

var svg = d3.select("body").append("svg")
  .attr("id", "chart")
  .attr("width", w)
  .attr("height", h);

var chart = svg.append("g")
  .classed("display", true)
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


chart.append("g")
  .call(yGridlines)
  .classed("gridline", true)
  .attr("transform", "translate(0,0)");

chart.selectAll(".bar")
  .data(data)
  .enter()
  .append("rect")
  .classed("bar", true)
  .attr("x", function(d, i) {
    return x(d.area) + 1;
  })
  .attr("y", function(d, i) {
    return y(d.age1);
  })
  .attr("height", function(d) {
    return height - y(d.age1);
  })
  .attr("width", function(d) {
    return x.bandwidth() - 1;
  })
  .style("fill", function(d, i) {
    return ordinalColorScale(i);
  });

chart.selectAll(".bar-label")
  .data(data)
  .enter()
  .append("text")
  .classed("bar-label", true)
  .attr("x", function(d, i) {
    return x(d.area) + x.bandwidth();
  })
  .attr("dx", -30)
  .attr("y", function(d, i) {
    return y(d.age1);
  })
  .attr("dy", 18)
  .style("font-size", "12px")
  .text(function(d) {
    return d.age1;
  });

chart.append("g")
  .classed("x axis", true)
  .attr("transform", "translate(" + 0 + "," + (height + 2) + ")")
  .call(xAxis)
  .selectAll("text")
  .classed("x-axis-label", true)
  .style("text-anchor", "start")
  .attr("dx", 8)
  .attr("dy", 10)
  .attr("transform", "rotate(45)")
  .style("font-size", "12px")

chart.append("g")
  .classed("y axis", true)
  .attr("transform", "translate(-3,0)")
  .call(yAxis)

//This is the y label
chart.select(".y.axis")
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin.left / 2)
  .attr("x", 0 - (height / 2))
  .attr("dy", "1em")
  .style("fill", "red")
  .style("text-anchor", "middle")
  .text("Unemployment Rate");

//This is the x label
chart.select(".x.axis")
  .append("text")
  .attr("x", 0)
  .attr("y", 0)
  .style("text-anchor", "middle")
  .attr("transform", "translate(" + width / 2 + ",80)")
  .text("Regions in Vietnam");