右轴未显示在双轴分组条形图和折线图 D3 上答案

【问题标题】：Right Axis not displaying on Dual Axis Grouped Bar and Line Chart D3右轴未显示在双轴分组条形图和折线图 D3 上
【发布时间】：2020-11-17 01:32:04
【问题描述】：

我正在制作双轴组条形图和折线图。它几乎完全在那里。但是由于某种原因，右轴没有得到正确的样式或其他东西。因为当我检查代码时它在 svg 中，但我无法让它显示出来。我已经搞砸了大约一个小时的样式和东西，这可能非常简单。就是没找到。

Here 可以解决我的问题。

这是应用于 svg 的代码：

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + (width) + ",0)")
  .call(YLeftAxis)

  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", -10)

  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Percent");

【问题讨论】：

你需要加宽你的SVG，目前不占margin.right：.attr("width", width + margin.left)

标签： javascript css d3.js svg

【解决方案1】：

正如安德鲁所说，您在 svg 中没有足够的空间。我做了以下更改，现在您的第二个轴正确显示：

var margin = {top: 20, right: 40, bottom: 50, left: 100}

var x0 = d3.scaleBand().rangeRound([0, width - margin.right]).padding(0.1);

var XLine = d3.scalePoint().rangeRound([0, width - margin.right]).padding(0.1);

JSFiddle with working axes

【讨论】：