关于javascript：分割D3图Y轴垂直色线


Split D3 Graph Y Axis vertical color lines

我正在尝试拆分一些D3图Y轴垂直彩色线。 您可以在下面的图像中看到当前外观以及外观：

enter image description here

到目前为止，我已经尝试为该g元素设置背景颜色，以使该行不会在该特定区域中显示，但是行不通； 我无法使用background-color: gray;设置背景颜色。

为了更好地了解HTML标记，您可以在下图中看到用D3 foreignObjects表示的彩色线位于文本值的下方。

enter image description here

有谁知道如何拆分这些彩色线条？

更新资料

在我的情况下仍然无法正常工作。 我尝试首先渲染彩色线条，然后渲染文本值。 这是我的代码：

您有两个问题：

  • 您不能设置元素的样式。 组只是容器元素。

  • 您的foreignObject不在文本下方，它们实际上位于文本上方。 在SVG中，稍后被涂漆的人保持在最前面。 因此，如果您检查DOM，则底部的元素将稍后绘制并位于顶部的"层"中，而顶部的元素将首先绘制并位于底部的"层"中。

    • 综上所述，一种更简单的方法是选择所有.tick组并在文本之前(即在文本下方)插入一个矩形。 当然，要使此方法起作用，请记住在轴之前(再次意味着在轴下方)绘制线条，就像在下面的演示中一样。

    这是演示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    var svg = d3.select("body")
    .append("svg")
    .attr("width", 200)
    .attr("height", 300);

    var color = d3.scaleOrdinal(d3.schemeCategory10);

    var lines = svg.selectAll("foo")
    \t.data([1,1])
    \t.enter()
    \t.append("line")
    \t.attr("y1", 0)
    \t.attr("y2", 500)
    \t.attr("x1", (d,i)=>100 + i*8)
    \t.attr("x2", (d,i)=>100 + i*8)
    \t.attr("stroke-width", 2)
    \t.attr("stroke", (d,i)=>color(i));
    \t
    var scale = d3.scalePoint()
    \t.domain(d3.range(62,78,2))
    \t.range([10,290]);

    var gY = svg.append("g")
    .attr("class","axis")
    .attr("transform","translate(126,0)").call(d3.axisLeft(scale).tickFormat(d=>d3.format(".1f")(d)));

    d3.selectAll(".tick").each(function(d,i){
      var tick = d3.select(this),
          text = tick.select("text"),
          bBox = text.node().getBBox();

      tick.insert("rect",":first-child")
        .attr("x", bBox.x - 3)
        .attr("y", bBox.y - 3)
        .attr("height", bBox.height + 6)
        .attr("width", bBox.width + 6)
        .style("fill","white");      
    });
    \t
    1
    2
    3
    4
    5
    6
    7
    .tick text{
    \tfont-size: 14px;
    }

    .axis path, .axis line{
    \tstroke: none;
    }
    1
    <script src="https://d3js.org/d3.v4.min.js">

    PS：我从此答案中借用了在刻度线中插入矩形的代码。

    相关讨论