javascript - D3js使y轴高度为100
问题描述
我在这里有这个 D3js 折线图:
http://jsfiddle.net/90pgka1f/7/
它工作正常,除了我希望 y 轴范围从 0 到 100。目前,y 轴的顶部只是数据集中的最高值(样本中的 65.55)
var tokenPricesArray = [
{"date":"18-Sep-18", "bitcoin_dominance":"55.55"},
{"date":"19-Sep-18", "bitcoin_dominance":"65.55"},
];
// Set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
我怎样才能做到这一点,以便 y 轴缩放到 100?谢谢!
解决方案
只需将 y 比例的域设置为 [0,100] 而不是使用数据中的值:
y.domain([0, 100]);
这将确保轴覆盖整个 100% 而不是 0 到数据集中的最大值。
在上下文中:
var tokenPricesArray = [
{"date":"18-Sep-18", "bitcoin_dominance":"55.55"},
{"date":"19-Sep-18", "bitcoin_dominance":"65.55"},
];
// Milestones vs. Price
// Set the dimensions of the canvas / graph
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 40
},
width = 825 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
var paddingForText = 15;
// Parse the date
var parseDate = d3.timeParse("%d-%b-%y");
// Set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// Define the axes
var xAxis = d3.axisBottom(x).ticks(3);
var yAxis = d3.axisLeft(y).ticks(10);
// Define the line
var valueline = d3.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.bitcoin_dominance);
});
// Adds the svg canvas
var svg = d3.select("#priceWithMilestones")
.append("svg")
.style("background-color", "#ffffff")
//.attr("width", width + margin.left + margin.right)
//.attr("height", height + margin.top + margin.bottom)
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 825 450")
.attr("id", "priceWithEverything")
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var aspect = width / height,
chart = d3.select('#priceWithMilestones');
d3.select(window)
.on("resize", function() {
var targetWidth = chart.node().getBoundingClientRect().width;
chart.attr("width", targetWidth);
chart.attr("height", targetWidth / aspect);
});
data = tokenPricesArray;
tokenPricesArray.sort(function(a,b){
var c = new Date(a.date);
var d = new Date(b.date);
return c-d;
});
// Get the data
data.forEach(function(d) {
d.date = parseDate(d.date);
d.bitcoin_dominance = +d.bitcoin_dominance;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([0, 100]);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("stroke", "steelblue")
.attr("fill", "none")
.attr("d", valueline);
svg.append("g").selectAll("circle")
.data(data.filter(function(d){return d.notes}))
.enter()
.append("circle")
.attr("r", 4)
.attr("cx", function(d) {
return x(d.date)
})
.attr("cy", function(d) {
return y(d.bitcoin_dominance)
})
.classed("milestone-circle", true)
.attr("fill", "none")
//.attr("stroke", "#BA85FF")
.attr("stroke", "#000000");
svg.append("g").selectAll("text")
.data(data)
.enter()
.append("text")
.attr("x", function(d) {
return x(d.date) - paddingForText
})
.attr("y", function(d) {
return y(d.bitcoin_dominance) + paddingForText
})
//.attr("fill", "white")
// .text(function(d) {
// return d.notes
// })
// .classed("milestone-circle", true)
// .style("font-family", "Roboto")
// .style("font-size", "14px")
;
// Add the X Axis
svg.append("g")
.attr("class", "xaxis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "yaxis")
.call(yAxis);
body {font-family: Roboto;}
#priceWithMilestones {position: relative;}
.title {position: absolute; top: 0; text-align: center; width: 100%; }
.legend {position: absolute; top: 400px; right: 0; }
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<div id="priceWithMilestones">
<div class="title"><h1>Marketcap Dominance</h1></div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
</script>
推荐阅读
- django - 如何防止用户在 django 中提交后返回表单(所有表单登录、编辑帖子等)?
- python - 超声波范围传感器 (HC-SR04) 在 Raspberry Pi 上给出不一致的读数
- javascript - 反应 - 从状态数据计算总数
- pandas - numpy 数组到数据框,反之亦然
- cocoa - Cocoa:当窗口最小化以停靠时未调用 NSViewController.viewWillAppear() 和 viewDidAppear()
- r - 用形状和颜色更改ggplot中的图例标题
- css - 如何对齐 SVG 路径或增加元素的大小?
- haskell - 如何将索引转换为从森林到树的镜头?
- optaplanner - 将 Optaplanner 用于 VRPPD
- python - 使用 call_later 函数的问题 [asyncio]