Question

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

HTML SVG创建了y轴标签的文本元素
显示屏显示此元素的选定区域
此元素的颜色为 RED （我在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")

以下是仅包含此更改的代码：

＆＃13;

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");

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

将文本附加到图表，无需选择.y.axis和.x.axis

//This is the y label
chart.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.append("text")
    .attr("x", 0)
    .attr("y", 400)
    .style("text-anchor", "middle")
    .attr("transform", "translate(" + width/2 + ",80)")
    .text("Regions in Vietnam");

d3js v4 x轴标签在那里但不可见

2 个答案: