我怎样才能在与D3的散点图两个轴绘制正值和负值?

我使用D3建立一个散点图和值的集合我对x和y轴都有正面和负面的价值观。 这是我在使用D3的第一次尝试,我已经从入门教程,如在圣诞节的第十天云集,弄脏使用d3.js数据,即关键是正确设置x和y尺度。

接下来,我发现这个教程:条形图与负值,这几乎让我得到它的权利(我认为)。 我的数据集是太沉重要放在这里,但这里是我有我的数据一起工作的样本代码:

<div id="compareAll"></div> <script> window.onload = function() { var dataSet = [ [4,4], [-4,4], [-4,-4], [4,-4], ]; var x0 = Math.max(-d3.min(dataSet[0]), d3.max(dataSet[0])); var xScale = d3.scale.ordinal() .domain([-x0,x0]) .range([0,10]); var yScale = d3.scale.ordinal() .domain(d3.range(dataSet[1]) .rangeRoundBands([0,10]); var svg = d3.select("#compareAll") .append("svg") .attr("width", 10) .attr("height",10) svg.selectAll("circle") .data(dataSet) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r",4); var xAxis = d3.svg.axis() .scale(xScale) .tickSize(1); var yAxis = d3.svg.axis() .scale(yScale) .tickSize(1); svg.append("svg:g") .attr("class", "x axis") .attr("transform", "translate(0,10)") .call(xAxis); svg.append("svg:g") .attr("class", "y axis") .attr("transform", "translate(10,0)") .call(yAxis); } </script>

坦率地说,我不明白使用的条形图例子顺序量表的,但是我得到了相宜更坏的结果,当我把它搞得yScale具有相同的语法xScale等。

最好的方式做任何解释去了解与两个轴正值和负值,将不胜感激工作。 让我知道如果我失去了一些东西明显。 我经历了来自一个更大的项目为使其具体和容易地阅读这个例子。

谢谢!

--------------解决方案-------------

没有什么特别的使用负值为您轴-你应该简单地用线性尺度的轴,并设置域[min, max]其中min很可能是否定的。

在这里看到你的代码的工作版本:http://jsfiddle.net/nrabinowitz/qN5Sa/

在这几点注意事项:

  • 你一定要使用线性尺度散点图,除非你想要更多的矩阵。 一个标准的X规模可能是这样的:

    var xScale = d3.scale.linear()
    .domain([-5, 5])
    .range([0,w]);
  • d3.svg.axis()组件包括一个.orient()设置-默认情况下,这是"bottom" ,即与线下数字的水平轴。 为了使正确的方向y轴,使用.orient('left')
  • 我不包括代码,以确定基于您的数据的每个轴的最小/最大领域,因为我想它会的例子复杂化。 但是你可以做到这一点很容易,如果你不知道你的数据的范围:

    // assuming data like [[x0,y0], [x1,y1]]
    var xmin = d3.min(data, function(d) { return d[0] }),
    xmax = d3.max(data, function(d) { return d[0] }),
    ymin = d3.min(data, function(d) { return d[1] }),
    ymax = d3.max(data, function(d) { return d[1] });
分类:d3.js 时间:2015-03-15 人气:1
本文关键词: d3.js
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.287 (s). 10 q(s)