Javascript 使用D3.min与D3的域问题_Javascript_D3.js_Graphics

Javascript 使用D3.min与D3的域问题

javascript d3.js graphics

Javascript 使用D3.min与D3的域问题,javascript,d3.js,graphics,Javascript,D3.js,Graphics,我对D3的min和max函数有一个问题，当我在我的域中使用它们时，它们似乎工作不正常，max只取最大值以下的值，同样的情况也发生在min上。或者至少看起来是这样，因为我的图缺少上下最大值。现在，我手动修补了它（只是通过时间间隔），但下周我将使用数百个数据集，因此我需要自动正确地进行修补，提前感谢，下面是我失败的axis代码：编辑：它的工作非常糟糕，有些集合可以工作，有些则不行，在其他集合中，我不知道为什么，加上范围失败，它反转了Y轴。我很确定我的错误在德伊朗格微积分上，但我不知道确切的位置

我对D3的min和max函数有一个问题，当我在我的域中使用它们时，它们似乎工作不正常，max只取最大值以下的值，同样的情况也发生在min上。或者至少看起来是这样，因为我的图缺少上下最大值。现在，我手动修补了它（只是通过时间间隔），但下周我将使用数百个数据集，因此我需要自动正确地进行修补，提前感谢，下面是我失败的axis代码：

编辑：它的工作非常糟糕，有些集合可以工作，有些则不行，在其他集合中，我不知道为什么，加上范围失败，它反转了Y轴。我很确定我的错误在德伊朗格微积分上，但我不知道确切的位置

   <!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>


原因
.轴路径，.轴线
{
填充：无；
行程：777；
形状渲染：边缘清晰；
}
.轴文本
{
字体系列：“Arial”；
字体大小：13px；
}
打上钩
{
笔划数组：1,2；
}
.酒吧
{
填料：耐火砖；
}
InitChart（）；
函数InitChart（）{
var线性数据；
d3.tsv（“data.tsv”，功能（数据）{
seeData（数据）；
//d3.tsv（“数据2.tsv”），功能（数据）{
//seeData（数据）；
});
函数seeData（lineData）{
var vis=d3。选择（“可视化”），
宽度=1000，
高度=500，
边距={
前20名，
右:20,，
底数：30，
左：50
},
xRange=d3.scale.linear（）.range（[MARGINS.left，WIDTH-MARGINS.right]）.domain（[2008，
//d3.min（线路数据，功能（d）{
//返回d.x；
//}),
d3.最大值（线数据，函数（d）{
返回d.x；
})
]),
//yRange=d3.scale.linear（）.range（[HEIGHT-MARGINS.top，MARGINS.bottom]）.domain（[0.079,0.13]），此选项有效，但为手动操作
yRange=d3.scale.linear（）.range（[HEIGHT-MARGINS.top，MARGINS.bottom]）.domain（[d3.min（lineData，function（d））{
返回d.y；
}),
d3.最大值（线数据，函数（d）{
返回d.y；
})
]),
xAxis=d3.svg.axis（）
.刻度（X范围）
.尺寸（5）
.tickSubdivide（真），
yAxis=d3.svg.axis（）
.刻度（Y量程）
.尺寸（5）
.东方（“左”）
.tickde（真）；
vis.append（“svg:g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度-边距.底部）+”）
.呼叫（xAxis）；
vis.append（“svg:g”）
.attr（“类”、“y轴”）
.attr（“转换”、“转换”（+（MARGINS.left）+“，0）”）
.呼叫（yAxis）；
var lineFunc=d3.svg.line（）
.x（功能（d）{
返回x范围（d.x）；
})
.y（功能（d）{
返回y范围（d.y）；
})
.插入（“线性”）；
vis.append（“svg:path”）
.attr（“d”，lineFunc（lineData））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，3）
.attr（“填充”、“无”）
//阿卡巴
.on（'点击'）功能（d）{
d3.选择（本）
如果（d3.select（this.attr）（“stroke”）！=“red”）{d3.select（this.attr）（“stroke”，“red”）}
else{d3.select（this.attr）（“stroke”，“blue”）
d3.选择（this）.attr（“笔划宽度”，3）；}
})
.on（'mouseover'，函数（d）{
d3.选择（本）
.attr（“笔划”、“绿色”）
.attr（“笔划宽度”，9）；
})
.on（'mouseout'，函数（d）{
d3.选择（本）
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，3）；
});
}
}

问题在于您正在从TSV文件读取字符串，而不是将其转换为数字。这意味着“10”将小于“9”（因为“1”在“9”之前）。要解决此问题，只需使用

将字符串转换为数字，特别是使用

+d.y

而不是

d.y
是否您的d.y
字符串可能是数字？是的，它们应该是数字，您确定它们是字符串吗？我在javascript键入方面有点迷失方向，我认为min和max必须重新输入urn numbres，不是字符串，我怎么能在这里选角色？谢谢！尝试+d.y
而不是d.y
。我只是在这里猜测，因为你没有给我们任何关于你的数据或它是如何获得的信息。它似乎不起作用，数据只是医院的死亡率，类似于2.3566e-2，取自TSV文件，如果你知道的话你需要完整的代码或数据文件，只管索取。谢谢，你要把TSV中的字符串转换成数字？