小编eyo*_*unt的帖子

如何在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") …
Run Code Online (Sandbox Code Playgroud)

d3.js

5
推荐指数
1
解决办法
8904
查看次数

标签 统计

d3.js ×1