d3 customize tick line (based on nextSibling)

问题

I have gaps in my data (on the y-axis), so even though I'd rather use a linear scale, I have to go with an Ordinal scale — so that the holes are not seen.

However, I do want to visually show that the data was not continuous using a different tick marker. The idea here is to check if the next value - current value is 1, and if not draw a different tick line.

Using this example I used this.parentNode.nextSibling — but it's not getting the required value.

How can I go about doing this?

Sample code below. I would want the lines for 2, 5 and 8 show up in a different tick (say stroke-dasharray: "10,2" or may be a different color)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ticks problem</title>
  </head>
  <body>

    <svg width="500" height="300"></svg>

    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      var svg = d3.select("svg"),
        margin = {top: 20, right: 0, bottom: 20, left: 0},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var data = [5, 15, 7, 10, 4, 12, 14];

      var yDomain = [1, 2, 4, 5, 8, 10, 11];
      var yRange  = Array(data.length+1).fill().map((d,i)=>(i+1)*35);
      var yScale = d3.scaleOrdinal()
          .domain(yDomain)
          .range(yRange);

      var yAxis = d3.axisRight(yScale)
        .ticks(data.length+1)
        .tickSize(width);

      function customYAxis(g) {
        g.call(yAxis);
        g.attr("id", "y-axis");
        g.select(".domain").remove();
        //g.selectAll(".tick line").attr("stroke", "#777").attr("stroke-dasharray", "2,2");
        g.selectAll(".tick line")
        .attr("stroke", "#777")
        .attr("stroke-dasharray", (d,i)=>{
          //let n = d3.select(this.parentNode.nextSibling).datum(); // not working
          //console.log(i + " " + d+" "+n);
          // return "10,2" if n-d > 1
          return "2,2"; // return some default for now
        })
        g.selectAll(".tick text").attr("x", 4).attr("dy", -4);
      }

      g.append('g').call(customYAxis);
    </script>

  </body>
</html>

回答1:

Remember, that selection.attr() will get called providing three arguments:

being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i])

You can make use of the third argument to access the datum of the next element. Since i is the index of the current element, node[i+1] will point to the next element. You can easily select that next element and use .datum() to retrieve the bound datum.

d3.select(nodes[i+1]).datum()

The only thing left is to employ a safeguard to not read past the last element in the nodes array.

i < nodes.length - 1 && d3.select(nodes[i+1]).datum()

This can directly be used in your .attr() setter:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ticks problem</title>
  </head>
  <body>

    <svg width="500" height="300"></svg>

    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      var svg = d3.select("svg"),
        margin = {top: 20, right: 0, bottom: 20, left: 0},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var data = [5, 15, 7, 10, 4, 12, 14];

      var yDomain = [1, 2, 4, 5, 8, 10, 11];
      var yRange  = Array(data.length+1).fill().map((d,i)=>(i+1)*35);
      var yScale = d3.scaleOrdinal()
          .domain(yDomain)
          .range(yRange);

      var yAxis = d3.axisRight(yScale)
        .ticks(data.length+1)
        .tickSize(width);

      function customYAxis(g) {
        g.call(yAxis);
        g.attr("id", "y-axis");
        g.select(".domain").remove();
        //g.selectAll(".tick line").attr("stroke", "#777").attr("stroke-dasharray", "2,2");
        g.selectAll(".tick line")
        .attr("stroke", "#777")
        .attr("stroke-dasharray", (d, i, nodes) => {
          return i < nodes.length - 1 && d3.select(nodes[i+1]).datum() - d > 1 ? "10,2" : "2,2";
        })
        g.selectAll(".tick text").attr("x", 4).attr("dy", -4);
      }

      svg.append('g').call(customYAxis);
    </script>

  </body>
</html>

来源：https://stackoverflow.com/questions/47796771/d3-customize-tick-line-based-on-nextsibling

标签

javascript

d3.js