假设我根据我拥有的一些数据创建了一个条形图。此条形图是在一组 x 轴和 y 轴上生成的。如何将一个函数(格式为 y=f(x))绘制为同一组轴上的一条线？我想这样做是为了让您可以轻松地比较条形图和函数显示的趋势。
最佳答案
您只需在域的所需值上运行该函数，然后使用例如线生成器绘制线，即可生成要馈送到 d3 的数据。
var w = 400;
var h = 400;
var padding = 50;
var svg = d3.select('svg').attr('width', w + padding * 2).attr('height', h + padding * 2);
var xScale = d3.scale.linear().domain([-10, 10]).range([0, w]);
var yScale = d3.scale.linear().domain([2, -2]).range([0, h]);
var xAxis = d3.svg.axis().scale(xScale);
var yAxis = d3.svg.axis().scale(yScale).orient("left");
var g = svg.append("g").attr("transform", "translate(" + padding + "," + padding + ")");
g.append("g").attr("transform", "translate(0, " + w / 2 + ")").call(xAxis);
g.append("g").attr("transform", "translate(" + h / 2 + ", 0)").call(yAxis);
var line = d3.svg.line().interpolate("basis")
.x(function(d, i) {
return xScale(d.x);
})
.y(function(d, i) {
return yScale(d.y);
})
g.append('path')
.data([fn1()])
.attr("d", line);
g.append('path')
.data([fn2()])
.attr("d", line);
g.append('path')
.data([fn3()])
.attr("d", line);
g.append('path')
.data([fn4()])
.attr("d", line);
function fn1() {
function f(x) {
return Math.cos(x);
}
return _.chain(_.range(-10, 10)).map(function(x) {
return {
y: f(x),
x: x
};
}).value();
}
function fn2() {
function f(x) {
return Math.sin(x);
}
return _.chain(_.range(-10, 10)).map(function(x) {
return {
y: f(x),
x: x
};
}).value();
}
function fn3() {
function f(x) {
return Math.exp(x);
}
return _.chain(_.range(-10, 10)).map(function(x) {
return {
y: f(x),
x: x
};
}).value();
}
function fn4() {
function f(x, m, b) {
return m * x + b;
}
return _.chain(_.range(-10, 10)).map(function(x) {
return {
y: f(x, 1, 1),
x: x
};
}).value();
} path {
stroke: black;
fill: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
<svg></svg>
</body>关于javascript - 在 D3 中的条形图上叠加一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35395381/