寻找更好的方法来改变d3.js v4中轴组件的颜色

Question

我想为简单的d3.js(v4)图更改轴的颜色.下图中的y轴是成品的一个例子;

我怀疑我使用的方法实现这一点有点难看,我相信根据下面的描述应该有一个替代方案,我还不明白.

所述轴部件是需要的各自的样式改变(中风和填充)文本,路径和线路元件的组合.

在这一点上,我发现改变组件颜色的唯一方法是<style>在代码部分单独设置样式...

.axisRed line{
  stroke: red;
}

.axisRed path{
  stroke: red;
}

.axisRed text{
  fill: red;
}

...并在稍后在JavaScript中附加该类时将该类应用于y轴;

  svg.append("g")
      .attr("class", "axisRed")
      .call(d3.axisLeft(y));

有没有办法可以.style("<some style>", "<some value>")在附加y轴而不是在该<style>部分中声明时通过线应用这些样式？

这里有代码示例.

我曾尝试尝试解决各个DOM组件,例如"域"类,但没有成功.我怀疑我不太了解轴组件的层次结构.

Answer 1

要内联样式化，只需保留对添加轴的引用并选择组件即可：

  // Add the Y Axis
  var axis = svg.append("g")
    .call(d3.axisLeft(y));

  axis.selectAll("line")
    .style("stroke", "purple");

  axis.selectAll("path")
    .style("stroke", "green");

  axis.selectAll("text")
    .style("stroke", "blue");

完整示例：

  // Add the Y Axis
  var axis = svg.append("g")
    .call(d3.axisLeft(y));

  axis.selectAll("line")
    .style("stroke", "purple");

  axis.selectAll("path")
    .style("stroke", "green");

  axis.selectAll("text")
    .style("stroke", "blue");

Answer 2

在D3上你有几个选项来设置元素的样式:

选项A:在课堂上使用样式标签:

axisRed line{
  stroke: red;
}

.axisRed path{
  stroke: red;
}

.axisRed text{
  fill: red;
}
// apply applying that class to the y
 svg.append("g")
      .attr("class", "axisRed")
      .call(d3.axisLeft(y));

选项B:将样式标记与自动生成类一起使用:

D3 domain为轴线指定类,在每个刻度类tick线和指定的组'g'内指定text.没有定义特定的类:

<style>
    path.domain  {
    stroke: red;
}
   .tick text {
    fill:blue
}
</style
.
.
 svg.append("g").call(d3.axisLeft(y));

// generate code 
<path class="domain" stroke="#000" d="M-6,450.5H0.5V0.5H-6"></path>
<g class="tick" opacity="1" transform="translate(0,414)">
      <line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line>
      <text fill="#000" x="-9" y="0.5" dy=".32em">50</text>
</g>

选项C:在上线时间内联

在D3 V3上你可以做得更紧凑:

svg.append("line")
   .style({
      fill:"none",
      stroke:"#f00",
      "stroke-width":"10"
    })

但在D3 V4上,不起作用.所以我打开一个'问题':你可以在这里检查并跟踪进度:https://github.com/d3/d3-selection/issues/82

**更新**在V4上,您必须包含selection-multi:

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

然后用:styles这一翻译style和attrs替代attr:

svg.append("line")
   .styles({
      fill:"none",
      stroke:"#f00",
      "stroke-width":"10"
    })

为你的例子:

svg.selectAll(".domain")
   .styles({ fill:"none", stroke:"#f00",  "stroke-width":"1" });

现在,您可以通过一种紧凑的方式来设计元素

额外:你可以设计和调整任何元素:

 var svg = d3.select("body").append("svg")
        .attrs({width:600, height:600})
        .styles({
             border:"1px",
            "border-style":"solid",
            "border-color":"#f00"})

这是掠夺者