Question

我正在尝试在我的JS对象/数组中的 glob 和 local 之间创建一个成对的条形图。我之前在D3中制作了条形图，但没有使用过对象。我发现很难获得正确的数据。

最终，关键字数据将用于轴。 cpc 将用作工具提示。

这是我到目前为止的代码：（or see my JSFiddle）

var w = 600;
var h = 400;

var colors = ["#377EB8", "#4DAF4A"];

var dataset = {"keyword": ["payday loans", "title loans", "personal loans"],
            "glob": ["1500000", "165000", "550000"],
            "local": ["673000", "165000", "301000"],
            "cpc": ["14.11", "12.53", "6.14"]   
};


var series = 2; // Global & Local

var x0Scale = d3.scale.ordinal()
            .domain(d3.range(dataset.glob.length))
            .rangeRoundBands([0, w], 0.05); 


var yScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d) {return d.glob;})]) 
            .range([0, h]);

var glob = function(d) {
    return d.glob;
};

//SVG element
var svg = d3.select("#searchVolume")
        .append("svg")
        .attr("width", w)
        .attr("height", h);     

// Graph Bars
svg.selectAll("rect") 
    .data(dataset, glob) //access the series here?
    .enter()
    .append("rect")
    .attr("x", function(d, i){
        return x0Scale(i);
    })
    .attr("y", function(d) {
        return h - yScale(d.glob);
    })
    .attr("width", x0Scale.rangeBand())
    .attr("height", function(d) {
        return yScale(d.glob); // ***************
    })
    .attr("fill", colors[1]);

目前，图表未填充。我假设我没有正确访问值。我只是试图从 glob 获取数据以确保我正确访问 - 然后从那里我将填充两个系列等等。我的问题是否正确访问键/值？

Answer 1

看看这个：http://jsfiddle.net/juY5E/2/

我可以通过将.data(dataset, glob)更改为.data(dataset.glob)，然后将d.glob更改为+d以获取'y'attr，'height'attr和在yScale.domain

要能够在glob和local之间切换，您可能需要重新构建数据。

访问配对条形图中的键/值 - D3.js

1 个答案: