小编Jim*_*Bai的帖子

D3.js在两条路径之间添加拦截点和区域

我正在使用简单的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)

html javascript css frontend d3.js

7
推荐指数
1
解决办法
615
查看次数

标签 统计

css ×1

d3.js ×1

frontend ×1

html ×1

javascript ×1