在标签

Question

我的reactJS应用中使用d3和svg设置了散点图。我需要在标签下方的y轴上显示水平线。目前，水平线出现在标签旁边。

这是我的代码：

const yAxis = d3.axisLeft(yScale).tickFormat(function(d) {
  if (d != minYFloor)
    return d + " yds";
  else return "";
})
.tickSize(-width - 20, 0, 0);

上面代码中的

tickSize函数在图中呈现水平线，如下所示：

这是我的css：

.axisY line {
  fill: none;
  stroke: #fff;
  opacity: 0.3;
  shape-rendering: crispEdges;
}

虽然我需要这样的东西：

我如何实现这一目标？

Answer 1

以下是如何translate轴上的刻度的基本示例。

让我们假设这个正在运行的片段：

＆＃13;

＆＃13;

var svg = d3.select("svg");
var scale = d3.scalePoint()
  .domain([0, 50, 100, 150, 200])
  .range([140, 10]);
var axis = d3.axisLeft(scale)
  .tickFormat(function(d) {
    return d + " yds"
  })
  .tickSize(-250);
var g = svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(50,0)")
  .call(axis);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，它是一个常见的y轴，就像你的一样。

要翻译刻度，我们首先指定该轴＆＃39;将特定类（或ID）分组：

 .attr("class", "axis")

然后，我们选择ticks类的文本，然后移动它们：

svg.selectAll(".axis .tick text")
  .style("text-anchor", "start")
  .attr("transform", "translate(4,-6)")

以下是演示：

＆＃13;

＆＃13;

var svg = d3.select("svg");
var scale = d3.scalePoint()
  .domain([0, 50, 100, 150, 200])
  .range([140, 10]);
var axis = d3.axisLeft(scale)
  .tickFormat(function(d) {
    return d + " yds"
  })
  .tickSize(-250);
var g = svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(50,0)")
  .call(axis);

svg.selectAll(".axis .tick text")
  .style("text-anchor", "start")
  .attr("transform", "translate(4,-6)")

＆＃13;

.axis path {
stroke: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我在这里使用魔术数字，相应地更改它们。

最后，有一个重要的建议：与你的问题标题建议不同，移动标签，而不是行。这些行是用户看到datavis的位置的实际指标。