Geek Answers Handbook

D3.js adds a capture point and an area between two paths

I use lightweight d3 visualization to teach a simple break-even point business concept. I want to do interactive rendering with three sliders. I am wondering how to add an intercept point and draw an area between two lines. Here is the code I have. I want to add a capture point and an area between two lines and make them interactive with the slider. The graph I want looks like this:

enter image description here

Thanks!

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") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Adds X axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -6) .style("text-anchor", "end") .text("Units sold"); // Adds Y axis svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Sales") var path = svg.append('path'); var path1 = svg.append('path'); //y = mx + b var m = 0.5; var m1=1; var b = 130; updateSlope = function (newSlope) { m = newSlope; document.getElementById('slope').textContent = Math.round(newSlope*6); draw(); }; updateNewSlope = function (newSlope) { m1 = newSlope; document.getElementById('New_slope').textContent = Math.round(newSlope*6); draw(); }; updateYInt = function (newYInt) { b = newYInt; document.getElementById('yInt').textContent = Math.round(newYInt/8.6); draw(); }; var firstX = 0; var secondX = 600; yForX = function (x) { return -1 * x * m - b + height; }; NewyForX = function (x) { return -1 * x * m1 + height; }; // lol axis draw = function() { var point1 = [firstX, yForX(firstX)]; var point2 = [secondX, yForX(secondX)]; var point3 = [firstX, NewyForX(firstX)]; var point4 = [secondX, NewyForX(secondX)]; points = [point1, point2]; points1 = [point3, point4]; path.datum(points) .transition() .ease('linear') .attr('d', line) .attr('class', 'line'); path1.datum(points1) .transition() .ease('linear') .attr('d', line) .attr('class', 'line1'); } draw(); 
 .line { stroke: green; stroke-width: 2px; } .line1 { stroke: blue; stroke-width: 2px; } .slider { float: left; width: 160px; margin-top: 30px; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <body> <div> <div id="chart1"></div> <div class='slider'> <div>Price/unit:<span id="New_slope"></span></div> <input type="range" min=0 max=2 step=.1 oninput="updateNewSlope(this.value)"> </div> <div class='slider'> <div>Variable cost/unit:<span id="slope"></span></div> <input type="range" min=0 max=2 step=.1 oninput="updateSlope(this.value)"> </div> <div class='slider'> <div>Fixed cost:<span id="yInt"></span></div> <input type="range" min=0 max=500 step=8.6 oninput="updateYInt(this.value)"> </div> </div> </body>
+7
javascript html css frontend
source share
1 answer

It should be simple enough to add a dot to your draw function:

 if(intersectionX && intersectionY) { svg.append("circle") .attr("class", "intersection") .attr("fill", "red") .attr("cx", intersectionX) .attr("cy", intersectionY); } else { svg.selectAll(".intersection").remove(); }

The next task is to calculate the intersection of your two points, which are actually a mathematical problem, not a coding problem. I’ll point you to a couple of reading links, since StackOverflow is not intended for formatting math, but the main steps are:

  • Find the equation of both lines
  • Set x to the same value in both equations
  • Solve the equation for y - for example. both equations must be equal to each other

Calculate the intersection of two lines
Calculate the equation of lines
JSFiddle example

+1
source share

More articles:


All Articles