时间戳

首页 > 解决方案 > 如何获取 D3 Axis 的路径字符串

d3.js - 如何获取 D3 Axis 的路径字符串

问题描述

是否有一种有效的方法可以从轴生成器函数获取 D3 中生成的轴的路径字符串，例如下面，因为我需要稍后将添加到图表中的路径的交点将 X 轴一分为二，

var xScale = d3.scaleLinear().domain([0,10]).range([0,width]);

var xAxis = g.append("g")
.attr("class","x-axis-right")
.attr("transform", `translate(0, ${height})`)
.style("fill","blue")
.style("stroke","none")

var xAxisCall = d3.axisBottom(xScale);

xAxis.transition(t).call(xAxisCall);

标签： d3.js

解决方案

对我来说你为什么想要这个d属性没有什么意义，但无论如何，这是如何做到的：

在 D3 中，getter几乎是没有第二个参数的方法。所以，如果这设置了d属性......

selection.attr("d", foo);

...这得到它：

selection.attr("d");

因此，您只需要选择所需的路径，在您的情况下是：

xAxis.select("path").attr("d");

下面是demo，看控制台：

var width = 500,
  height = 100;
var svg = d3.select("svg");
var xScale = d3.scaleLinear().domain([0, 10]).range([10, width - 10]);

var xAxis = svg.append("g")
  .attr("class", "x-axis-right")
  .attr("transform", `translate(0, ${height - 30})`)
  .style("fill", "blue")
  .style("stroke", "none")

var xAxisCall = d3.axisBottom(xScale);

xAxis.call(xAxisCall);

var pathString = xAxis.select("path").attr("d");

console.log(pathString)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100"></svg>

推荐阅读