[英]y axis set custom values in D3 Charts v4
我需要將 y 軸值顯示為 60、120、180...或 200、400、600...
目前我的 y 軸顯示為 100、200、300..
我的測試代碼 - d3 圖形庫代碼..
HTML
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
Javascript
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return +d.n; })])
.domain([0, 100000])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
示例代碼鏈接 - https://www.d3-graph-gallery.com/graph/line_several_group.html
嘗試使用 scalePoint 而不是 scaleLinear:
var width = 800, height = 800;
var data = [60, 120, 180, 240, 300, 360];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var x = d3.scalePoint()
.domain([60, 120, 180, 240, 300]) // This is what is written on the Axis: from 0 to 100
.range([50, 400]); // This is where the axis is placed: from 100 px to 800px
var y = d3.scalePoint()
.domain([60, 120, 180, 240, 300]) // This is what is written on the Axis
.range([50, 400]); // This is where the axis is placed: from 50 px to 400px
// 繪制軸 svg.append("g").attr("transform", "translate(0,50)") // 這控制 Axis.call(d3.axisBottom(x)) 的垂直 position;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.