个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 14:22:11 26 4
gpt4 key购买 nike

我正在使用简单的 d3 可视化来教授一个简单的商业概念“收支平衡点”。我想通过使用三个 slider 使可视化具有交互性。我想知道如何添加截取点并绘制两条线之间的区域。这是我到目前为止的代码。我想在两条线之间添加截取点和区域，并使它们与 slider 交互。我想要的图表如下所示:

enter image description here

谢谢!

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>

最佳答案

只需将点添加到您的 draw 函数中就应该相当简单:

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

下一个挑战是计算两点的交点，这实际上是数学问题而不是编码问题。我会为您提供几个链接供您阅读，因为 StackOverflow 并不是真正为格式化数学而设计的，但基本步骤是:

  • 求出两条直线的等式
  • 将两个方程中的x设为相同的值
  • 求解 y 的方程 - 例如两个方程应该彼此相等

Calculate Intersection of 2 Lines
Calculate Equation of Lines
JSFiddle Example

关于javascript - D3.js 在两条路径之间添加截取点和区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33687639/

26 4 0
文章推荐： git - 可以让 "git mergetool"即使 merge 一个文件失败也自动继续尝试其他文件吗？
文章推荐： android - 为什么说PendingIntent.getBroadcast()中的requestCode没有被使用？
文章推荐： android - 不显示 ScrollView 中 RelativeLayout 的最后一个 LinearLayout
文章推荐： git - 如何记录每个分支的最后一次提交时间？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com