自定义 Y 轴标签并在 d3 中打勾
[英]Custom Y axis label and tick in d3
问题描述
我正在使用d3创建和 svg，如下所示
// 1 DATA const data = [ { "x": 50, "y": 0.10 }, { "x": 100, "y": 0.15 }, { "x": 150, "y": 0.25 }, { "x": 200, "y": 0.35 }, { "x": 250, "y": 0.45 }, { "x": 300, "y": 0.55 }, { "x": 350, "y": 0.65 }, { "x": 400, "y": 0.75 }, { "x": 450, "y": 0.85 }, { "x": 500, "y": 0.87 }, { "x": 550, "y": 0.92 }, { "x": 600, "y": 0.98 } ] height = 400, width = 720; padding = { top: 70, bottom: 50, left: 70, right: 70 } const boundHeight = height - padding.top - padding.bottom; const boundWidth = width - padding.right - padding.left; // 2 CREATE SCALE const scaleY = d3.scaleLinear() .range([boundHeight, 0]) .domain(d3.extent(data, d => dy)) // 3 SVG const svgns = 'http://www.w3.org/2000/svg' const svg = d3.select('svg') svg .attr('xmlns', svgns) .attr('viewBox', `0 0 ${width} ${height}`) //create bound element bound = svg.append('g') .attr('class', 'bound') .style('transform', `translate(${padding.left}px,${padding.top}px)`) bound.append('g').attr('class', 'yAxis1') .append('g').attr('class', 'yAxisLeft') .call(d3.axisLeft(scaleY).tickSizeInner([(-(boundWidth))]) .tickFormat(d3.format(",.0%"))) console.log(d3.mean(data.map(d => dy)))
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script> <svg></svg> <div id="container" class="svg-container"></div> <script src="next.js"></script>
data.y=0.5724999999999999的mean 。 除了自动生成的y-axis刻度和标签之外，我如何将此值传递给轴生成器以创建label和tick 。
1 个解决方案
解决方案1
2 已采纳 2022-06-15 04:25:59
获取刻度的自动生成刻度数组（ scaleY.ticks() ），将平均值添加到该数组并将其传递给axis.tickValues ：
.tickValues(scaleY.ticks().concat(mean))
这是您进行更改的代码：
//////////////////////////////////////////////////////////// //////////////////////// 1 DATA /////////////////////////// //////////////////////////////////////////////////////////// const data = [{ "x": 50, "y": 0.10 }, { "x": 100, "y": 0.15 }, { "x": 150, "y": 0.25 }, { "x": 200, "y": 0.35 }, { "x": 250, "y": 0.45 }, { "x": 300, "y": 0.55 }, { "x": 350, "y": 0.65 }, { "x": 400, "y": 0.75 }, { "x": 450, "y": 0.85 }, { "x": 500, "y": 0.87 }, { "x": 550, "y": 0.92 }, { "x": 600, "y": 0.98 } ] height = 400, width = 720; padding = { top: 70, bottom: 50, left: 70, right: 70 } const boundHeight = height - padding.top - padding.bottom; const boundWidth = width - padding.right - padding.left; //////////////////////////////////////////////////////////// //////////////////////// 2 CREATE SCALE //////////////////// //////////////////////////////////////////////////////////// const scaleY = d3.scaleLinear() .range([boundHeight, 0]) .domain(d3.extent(data, d => dy)) //////////////////////////////////////////////////////////// //////////////////////// 3 SVG// /////////////////////////// //////////////////////////////////////////////////////////// const svgns = 'http://www.w3.org/2000/svg' const svg = d3.select('svg') svg .attr('xmlns', svgns) .attr('viewBox', `0 0 ${width} ${height}`) //create bound element bound = svg.append('g') .attr('class', 'bound') .style('transform', `translate(${padding.left}px,${padding.top}px)`) const mean = d3.mean(data.map(d => dy)); bound.append('g').attr('class', 'yAxis1') .append('g').attr('class', 'yAxisLeft') .call(d3.axisLeft(scaleY) .tickValues(scaleY.ticks().concat(mean)) .tickSizeInner([(-(boundWidth))]) .tickFormat(d3.format(",.0%")))
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script> <body> <svg> </svg> <div id="container" class="svg-container"></div> <script src="next.js"></script> </body> </html>
d3-y轴刻度线不正确
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.