D3 y轴刻度网格不透明度和颜色

时间:2018-02-08 14:50:15

标签: d3.js opacity yaxis

我正在研究Bostocks Bl.ock的voronoi折线图 - https://bl.ocks.org/mbostock/8033015 - 而且我试图改变y轴刻度线的不透明度和颜色。我已将tickSize拉伸到(-width)以便它们穿过整个图表,但似乎无法将笔划从黑色变为浅灰色。

不确定这是我的D3术语还是简单的课程问题。

这是我当前的y轴代码:

g.append("g")
  .attr("class", "axis axis--y")
  .call(d3.axisLeft(y)
  .ticks(6)
  .tickSize(-width))
.append("text")
  .attr("transform", "rotate(360)")
  .attr("x", 4)
  .attr("y", 0.5)
  .attr("dy", "1em")
  .style("text-anchor", "start")
  .style("fill", "black")
  .style("font-weight", "bold")
  .text("No. of Tornadoes");

以下是我的课程:

<style>


.axis--y path {
  display: none;
  fill: none;
  stroke: #17BED5;
  stroke-width: 1.0;

}

.cities {
  fill: none;
  stroke: #d73027;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 1px;
}

.city--hover {
  stroke: #4575b4;
  stroke-width: 2px;
}

.focus text {
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

.voronoi path {
  fill: none;
  pointer-events: all;
}

.voronoi--show path {
  stroke: red;
  stroke-opacity: 0.2;
}

#form {
  position: absolute;
  top: 20px;
  right: 30px;
}



</style>

感谢任何帮助。

0 个答案:

没有答案