D3JS 图绘制在不正确的坐标处
d3js graph plotting at incorrect coordinates
我试图绘制简单的D3JS图。我完成了绘制轴,甚至绘制了数据,但数据没有出现在预期的位置。
根据我下面的json数据
var d1 = [{
value1: "30",
value2: "10"
}];
我试图在coordinates x axis 30 and y axis 10
处画一个圆,但图表上的圆出现在其他地方。
这是 jsfiddle 演示
这是我的代码
var d1 = [{
value1: "30",
value2: "10"
}];
function Update(){
var circles = vis.selectAll("circle").data(d1)
circles
.enter()
.insert("svg:circle")
.attr("cx", function (d) { return d.value1; })
.attr("cy", function (d) { return d.value2; })
.style("fill", "red")
circles
.transition().duration(1000)
.attr("cx", function (d) { return d.value1; })
.attr("cy", function (d) { return d.value2; })
.attr("r", function (d) { return 5; })
circles.exit ()
.transition().duration(1000)
.attr("r", 0)
.remove ();
}
/*************************************************/
/*******************Real Stuff starts here*******************/
var vis = d3.select("#visualisation"),
WIDTH = 600,
HEIGHT = 400,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([0,100]),
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,300]),
xAxis = d3.svg.axis() // generate an axis
.scale(xRange) // set the range of the axis
.tickSize(5) // height of the ticks
.tickSubdivide(true), // display ticks between text labels
yAxis = d3.svg.axis() // generate an axis
.scale(yRange) // set the range of the axis
.tickSize(5) // width of the ticks
.orient("left") // have the text labels on the left hand side
.tickSubdivide(true); // display ticks between text labels
function init() {
vis.append("svg:g") // add a container for the axis
.attr("class", "x axis") // add some classes so we can style it
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position
.call(xAxis); // finally, add the axis to the visualisation
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
}
init();
$('#btn').click(function(){
Update();
});
如果你
- 将数字定义为数字而不是字符串(即
value1: 30
而不是value1: "30"
)和 - 使用您定义的刻度(即
return xRange(d.value1)
而不是return d.value1
)。
在这里工作。
您的圆出现在像素 (30,10) 处,但这与轴标记的位置 30,10 不对应。使用比例设置点的位置。
.attr("cx", function (d) { return xRange(d.value1); })
.attr("cy", function (d) { return yRange(d.value2); })
您需要
将xScale
和yScale
应用于坐标以将它们转换为绘图空间。
看这个 jsFiddle
.attr("cx", function (d) { return xRange(d.value1); })
.attr("cy", function (d) { return yRange(d.value2); })
实际上它工作正常。 只是左上角是(0,0)而不是左下角(我怀疑,你必须假设)。
将 x,y 都设置为 0。圆圈将出现在左上角。
相关文章:
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- Amazon S3 REST API大小不正确
- Javascript Reg Exp不正确匹配
- DIV并排,位置不正确
- 仅在IE中,javascript中的时区名称不正确
- 注意:wp_enqueue_script调用不正确.在 Wordpress 调试模式下
- 你能解释一下为什么这个javascript不正确吗
- 从int值来看,Javascript日期不正确
- jQuery-迭代不正确?(太长,无法执行)
- 字符串解析不正确
- 日历显示不正确
- 引导程序下拉列表显示不正确
- Node.js:多个然后'It’执行顺序不正确
- Highcharts热图显示不正确
- D3JS 图绘制在不正确的坐标处
- 开放层 - 像素坐标不正确
- 为什么Raphael.js的动画设置到不正确的坐标
- css缩放的谷歌地图点击不正确的坐标
- firefox中的Google地图mouseevent显示不正确的坐标
- 谷歌地图坐标不正确