Question

我正在使用d3构建折线图并试图使我的刻度线呈灰色，而我的轴和刻度线标签将为深灰色。如何在不使用CSS的情况下在d3中设置此内联样式？我似乎不太正确。预先感谢！

这就是我建立x和y轴的方式：

var xAxis = d3.axisBottom(x)
  .scale(x)
  .ticks((width + 2) / (height + 2))
  .tickSize(-height)
  .tickPadding(10)
  .tickFormat(d3.timeFormat("%b %d, %H:%M:%S"))


var yAxis = d3.axisLeft(y)
  .scale(y)
  .ticks(5)
  .tickSize(-(width - 100))
  .tickPadding(10)

我如何附加它们：

var gX = svg.append("g")
  .attr("class", "axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
var gY = svg.append("g")
  .attr("class", "axis--y")
  .call(yAxis)

我试图放：

.style("stroke", "#c3c3c3")

在我的y轴上这样：

var gY = svg.append("g")
  .attr("class", "axis--y")
  .call(yAxis).style("stroke", "#c3c3c3")

但这只会更改刻度线标签的颜色，而不会更改线条...我可能在哪里出错？

谢谢

Answer 1

执行此操作时...

svg.append("g").call(yAxis).style("stroke", "#c3c3c3")

...您正在有效地设置stroke元素的<g>，该元素包含路径，行和文本。显然，您希望它可以设置所有这些元素的样式。

但是，D3轴生成器会自动设置<line>和<path>元素的样式。让我们看一下source code：

path = path.merge(path.enter().insert("path", ".tick")
    .attr("class", "domain")
    .attr("stroke", "currentColor"));

line = line.merge(tickEnter.append("line")
    .attr("stroke", "currentColor")
    .attr(x + "2", k * tickSizeInner));

因此，由轴生成器设置的那些样式将覆盖您为组设置的样式（在上面的代码中，currentColor只是CSS currentColor）。

让我们在此演示中看到它，用红色表示stroke：

const svg = d3.select("svg");
const g = svg.append("g");
const axis = d3.axisBottom(d3.scaleLinear().range([10, 290]));
g.call(axis).style("stroke", "red")

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

如您所见，我们将样式应用于组，但是只有文本元素继承了样式（它们看起来很丑，因为它是stroke，而不是fill样式）。

解决方案：

选择所需的元素并将样式应用于它们。

例如，选择线条和路径：

const svg = d3.select("svg");
const g = svg.append("g");
const axis = d3.axisBottom(d3.scaleLinear().range([10, 290]));
g.call(axis).selectAll("line,path").style("stroke", "red")

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

PS ：由于D3的新版本使用currentColor，因此您只需使用color属性即可绘制所有内容！看看：

const svg = d3.select("svg");
const g = svg.append("g");
const axis = d3.axisBottom(d3.scaleLinear().range([10, 290]));
g.call(axis).style("color", "red")

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

在没有CSS的情况下设置轴的样式

1 个答案: