0

我试图绘制简单的 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();
});
4

4 回答 4

1

您的圆圈出现在像素 (30,10) 处，但这与轴标记的位置 30,10 不对应。使用您的比例设置点的位置。

            .attr("cx", function (d) { return xRange(d.value1); })
            .attr("cy", function (d) { return yRange(d.value2); })
于 2013-10-04T18:09:27.920 回答
1

如果你可以

  • 将数字定义为数字而不是字符串（即value1: 30代替value1: "30"）和
  • 使用您定义的比例（即return xRange(d.value1)代替return d.value1）。

在这里工作 jsfiddle 。

于 2013-10-04T18:10:19.433 回答
0

您将需要应用xScale和yScale到您的坐标以将它们转换为绘图空间。

看到这个 jsFiddle

.attr("cx", function (d) { return xRange(d.value1); })
.attr("cy", function (d) { return yRange(d.value2); })
于 2013-10-04T18:13:02.387 回答
0

Actually it is working fine. It is just that top left corner is (0,0) and not bottom left (as I suspect, you must be assuming).

Set both x,y to 0. Circle will appear at top left corner.

于 2013-10-04T18:17:47.913 回答