我正在使用简单的d3可视化来教授一个简单的商业概念"收支平衡点".我想通过使用三个滑块使可视化交互.我想知道如何添加拦截点并在两条线之间绘制区域.这是我到目前为止的代码.我想在两条线之间添加截距点和区域,并使它们与滑块交互.我想要的图形如下所示:
谢谢!
var margin = {top: 20, right: 60, bottom: 30, left: 60};
var width = 720 - margin.left - margin.right;
var height = 480 - margin.top - margin.bottom;
var xPadding = 20;
var yPadding = 35;
var xScale = d3.scale.linear()
.domain([0, 10])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0, 50])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10);
var line = d3.svg.line();
var line1 = d3.svg.line();
var svg = d3.select("#chart1")
.append("svg") …Run Code Online (Sandbox Code Playgroud)