Question

我试图绘制一个由javascript对象数组组成的简单数据集。这是JSON格式的数组。

[{"key":"FITC","count":24},{"key":"PERCP","count":16},{"key":"PERCP-CY5.5","count":16},{"key":"APC-H7","count":1},{"key":"APC","count":23},{"key":"APC-CY7","count":15},{"key":"ALEXA700","count":4},{"key":"E660","count":1},{"key":"ALEXA647","count":17},{"key":"PE-CY5","count":4},{"key":"PE","count":38},{"key":"PE-CY7","count":18}]

每个对象只包含String: "key"和Integer: "count"。

现在，我在D3中绘制这些内容如下。

    function key(d) {
      return d.key;
    }

    function count(d) {
      return parseInt(d.count);
    }

    var w = 1000,
    h = 300,
    //x = d3.scale.ordinal()
          //.domain([count(lookup)]).rangePoints([0,w],1);
    //y = d3.scale.ordinal()
          //.domain(count(lookup)).rangePoints([0,h],2);

    var svg = d3.select(".chart").append("svg")
                .attr("width", w)
                .attr("height", h);

    var abs = svg.selectAll(".little")
                .data(lookup)
                .enter().append("circle")
                .attr("cx", function(d,i){return ((i + 0.5)/lookup.length) * w;})
                .attr("cy", h/2).attr("r", function(d){ return d.count * 1.5})

Here is what this looks like thus far.

我关心的是我如何映射我的“cx”坐标。 x（）缩放功能不应该自动处理，而不是像我目前处理那样缩放吗？我也试过.attr（“cx”，function（d，i）{return x（i）}）。

我最终想要做的是用适当的“键”标记这些圈子。任何帮助将不胜感激。

更新

我应该提一下，当我处理一个只有数组的数组而不是一个对象数组时，以下工作正常：

x = d3.scale.ordinal().domain(nums).rangePoints([0, w], 1),
y = d3.scale.ordinal().domain(nums).rangePoints([0, h], 2);

Answer 1

你的代码正在做你想要的......我刚刚添加了文本部分。这是FIDDLE。

var txt = svg.selectAll(".txt")
    .data(lookup)
    .enter().append("text")
    .attr("x", function (d, i) {
        return ((i + 0.5) / lookup.length) * w;
    })
    .attr("y", h / 2)
    .text(function(d) {return d.key;});

我评论了这些音阶，它们没有被使用......正如你已经注意到的那样。

使用D3中的javascript对象进行线性cx缩放

1 个答案: