使用 d3.min 的 D3 的域问题

Domain issue with D3 using d3.min

本文关键字：问题 D3 使用 min d3      更新时间：2023-09-26

我对 D3 的最小和最大函数有问题，当我将它们用于我的域时，它们似乎只是工作错误，max 只取最大值以下的值，同样的情况在最小值上倒置。或者至少看起来是这样，因为我的图表缺乏上级和下级最大值。现在我手动修补了它（只是通过间隔），但下周我将使用数百个数据集，所以我需要自动正确完成，提前感谢，这是我失败的轴代码：

编辑：它的工作非常有问题，有些设置有效，有些则不工作，而在那些其他设置中，我不知道为什么，添加到范围故障中，它反转了Y轴。我很确定我的错误在于de yRange微积分，但我不知道具体在哪里。

   <!DOCTYPE html>
<meta charset="utf-8">
<title>Causa básica</title>
<style>
 .axis path, .axis line
        {
            fill: none;
            stroke: #777;
            shape-rendering: crispEdges;
        }
        .axis text
        {
            font-family: 'Arial';
            font-size: 13px;
        }
        .tick
        {
            stroke-dasharray: 1, 2;
        }
        .bar
        {
            fill: FireBrick;
        }
</style>
<svg id="visualisation" width="1000" height="500"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
InitChart();
function InitChart() {
var lineData;
        d3.tsv("data.tsv", function(data) {
        seeData(data);  
        //d3.tsv("data2.tsv", function(data) {
        //seeData(data);  
        });
function seeData(lineData) {
  var vis = d3.select("#visualisation"),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 50
    },
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2008,
            //d3.min(lineData, function (d) {
        //return d.x;
      //}),
      d3.max(lineData, function (d) {
        return d.x;
      })
    ]),
   // yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0.079,0.13]), this works, but is manual
        yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function (d) {
        return d.y;
      }),
      d3.max(lineData, function (d) {
        return d.y;
      })
    ]),

    xAxis = d3.svg.axis()
      .scale(xRange)
      .tickSize(5)
      .tickSubdivide(true),
    yAxis = d3.svg.axis()
      .scale(yRange)
      .tickSize(5)
      .orient("left")
      .tickSubdivide(true);

  vis.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);
  vis.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);
  var lineFunc = d3.svg.line()
  .x(function (d) {
    return xRange(d.x);
  })
  .y(function (d) {
    return yRange(d.y);
  })
  .interpolate('linear');
vis.append("svg:path")
  .attr("d", lineFunc(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", 3)
  .attr("fill", "none")
  //acabar
    .on('click', function(d) {
        d3.select(this)
        if(d3.select(this).attr("stroke")!= "red"){ d3.select(this) .attr("stroke", "red")}
        else {d3.select(this) .attr("stroke", "blue")
                d3.select(this) .attr("stroke-width", 3);}
    })
  .on('mouseover', function(d) {
    d3.select(this)
      .attr("stroke", "green")
      .attr("stroke-width", 9);
  })
  .on('mouseout', function(d) {
    d3.select(this)
        .attr("stroke", "blue")
            .attr("stroke-width", 3);
  });
    }
}
</script>

问题是您正在从 TSV 文件中读取字符串，而不是将它们转换为数字。这意味着"10"将小于"9"（因为"1"在"9"之前）。要解决此问题，只需使用 + 将字符串转换为数字，特别是使用 +d.y 而不是 d.y 。

相关文章：