当x轴在D3中具有值时，动态设置y轴的颜色

Question

如果x轴值为0，我希望y轴标签为红色。不确定如何在下面动态，图像，代码和JSON数据。

JSON

[ { yAxis: '15.1.4', xAxis: 3 },
  { yAxis: '15.1.1', xAxis: 2 },
  { yAxis: '15.1.2', xAxis: 2 },
  { yAxis: '15.1.3', xAxis: 1 },
  { yAxis: '15.1.6', xAxis: 1 },
  { yAxis: '15.1.5', xAxis: 0 },
  { yAxis: '15.1.7', xAxis: 0 },
  { yAxis: '15.1.8', xAxis: 0 } ]

CS

.axisRed text{ 
  fill: red;
}

JS

      svg.append("g")
      .call(d3.axisLeft(y))
      data.forEach(function(d) {
      if (d.xAxis == 0) {
      console.log(d.yAxis);
      //??get the corresponding tick and then
      //- .attr("class", "axisRed");            
      }
      else {

      }
      });    

Answer 1

更好的想法是反过来：使用D3 each方法循环刻度并获取数据数组中的对应值。这可以使用索引来完成，但为了安全起见，我会根据刻度值过滤数据数组。

在我的演示中，数据数组包含以下对象：

{title: "A",value: 23}

title是y轴上的分类变量（对应于您的yaxis），而value是x轴上的定量变量（对应于您的xaxis）

因此，我们可以循环y轴刻度并获得对应的value：

d3.selectAll(".yAxis .tick").each(function(d) {
    d3.select(this).select("text").style("fill", function() {
        var value = data.filter(function(e) {
            return e.title === d
        })[0].value;
        return value ? "gray" : "red";
    })
})

以下是演示：

var width = 500,
  height = 200;

var data = [{
  title: "A",
  value: 23
}, {
  title: "B",
  value: 0
}, {
  title: "C",
  value: 0
}, {
  title: "D",
  value: 24
}, {
  title: "E",
  value: 42
}, {
  title: "F",
  value: 59
}, {
  title: "G",
  value: 38
}];

var margin = {
  top: 0,
  right: 0,
  bottom: 0,
  left: 30
};

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xScale = d3.scaleLinear()
  .range([margin.left, width - margin.right]);

var yScale = d3.scaleBand()
  .range([margin.top, height - margin.bottom])
  .padding(0.2);

xScale.domain([0, d3.max(data, function(d) {
  return d.value
})]);
yScale.domain(data.map(function(d) {
  return d.title
}));

var bars = svg.selectAll(".bars")
  .data(data);

bars.enter()
  .append("rect")
  .attr("class", "bars")
  .attr("x", xScale(0))
  .attr("y", function(d) {
    return yScale(d.title)
  })
  .attr("width", 0)
  .attr("height", yScale.bandwidth())
  .transition()
  .duration(1000)
  .delay(function(d, i) {
    return i * 200
  })
  .attr("width", function(d) {
    return xScale(d.value) - margin.left;
  });

var yAxis = d3.axisLeft(yScale)
  .tickSizeOuter(0)
  .tickFormat(function(d) {
    return d;
  });

svg.append("g")
  .attr("transform", "translate(" + margin.left + ",0)")
  .attr("class", "yAxis")
  .call(yAxis);

d3.selectAll(".yAxis .tick").each(function(d) {
  d3.select(this).select("text").style("fill", function() {
    var value = data.filter(function(e) {
      return e.title === d
    })[0].value;
    return value ? "gray" : "red";
  })
})

.bars {
  fill: teal;
}

.yAxis text {
  font-weight: 700;
}

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