Question

我正在尝试使用D3.js将苹果网格线添加到我的图形中我有一个问题，因为它看起来在我的图表上有不同的不透明度或颜色。我不明白为什么，我该如何解决这个问题？

修改

新图片让您更容易看到问题：

这是我用来应用网格线的代码：

JS：

xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
        .tickValues(createTickValuesArray(arr.length))
        .tickFormat(formatAxis)
        .innerTickSize(-height+100)
        .outerTickSize(0)
        .tickPadding(0);

SVG.select(".x.axis").transition().duration(ANIMATION_TIME_MODIFIER*1000)
        .call(xAxis)
        .selectAll("text")
            .style("text-anchor", "end")
            .style("font-size", AXIS_FONTSIZE)
            .style("font-family", "helvetica")
            .attr("transform", function(d) {
            return "rotate(" + AXIS_ROTATION + ")" 
            });

yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .innerTickSize(-width+40)
        .outerTickSize(2)
        .tickPadding(0);

SVG.select(".y.axis").transition().duration(ANIMATION_TIME_MODIFIER*1500).call(yAxis)
        .selectAll("text")
        .style("font-size", AXIS_FONTSIZE)
        .style("font-family", "helvetica");

CSS：

.axis path,
  .axis line{
    fill: none;
    stroke: black;
  }

  .tick line{
    opacity: 0.2;
  }

网格线在D3中看起来不一样？

0 个答案: