我在这里有此D3js折线图:
http://jsfiddle.net/90pgka1f/7/
除了我希望y轴范围从0到100之外,它都可以正常工作。目前y轴的顶部正好等于数据集中的最大值(样本中为65.55)
SELECT *
如何做到这一点,以使y轴缩放为100?谢谢!
答案 0 :(得分:1)
只需将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>