JSON键x轴，y的

Question

值基本上，我试图重新创建此图这是在Excel中创建：

到目前为止我的代码是这样的......

var theData = [ 
     { 
     'FB':4, 
     'Mv':4, 
     'CB':5, 
     'SL':3, 
     'CH':2, 
     'OT':2, 
     'Ctrl':6, 
     'Cmd':6, 
     'Del':5, 
     'AA':6, 
     }, 
     { 
     'FB':2, 
     'Mv':3, 
     'CB':4, 
     'SL':5, 
     'CH':4, 
     'OT':3, 
     'Ctrl':5, 
     'Cmd':6, 
     'Del':6, 
     'AA':5, 
     }, 
     etc... 
    ]; 

    var margin = {top:10, right:10, bottom:30, left:40}, 
     width = 600 - margin.left - margin.right, 
     height = 400 - margin.top - margin.bottom; 

    var x = d3.scale.ordinal() 
     .domain(d3.keys(theData[0])) 
     .rangeRoundBands([0, width]); 

    var y = d3.scale.linear() 
     .domain([2,8]) 
     .range([height,0]); 

    var xAx = d3.svg.axis() 
     .scale(x) 
     .orient('bottom') 
    var yAx = d3.svg.axis() 
     .scale(y) 
     .orient('left') 
     .ticks(3); 

    var svgContainer = d3.select('#d3Stuff').append('svg') 
     .attr('width',width + margin.left + margin.right) 
     .attr('height',height + margin.top + margin.bottom) 
     .style('border','1px solid black') 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    svgContainer.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAx) 
     .append("text") 
     .attr("class", "label") 
     .attr("x", width) 
     .attr("y", -6) 
     .style("text-anchor", "end"); 

    svgContainer.append("g") 
     .attr("class", "y axis") 
     .call(yAx) 
     .append("text") 
     .attr("class", "label") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end"); 

我在试图让数据对象中的值出现圆圈时遇到问题。我希望他们排列X轴键，显然。如果我至少可以获得初始值，那么我可以稍后计算最小/最大/平均值。

这里是代码创建至今：

任何帮助将是真棒！

Answer 1

您可以使用序数标度来查找使用键的任何圆的x位置（因为序号域由键组成）。例如x("FB")，x("Mv")等

要创建圆圈，您需要使用enter，update，exit等东西以典型的d3方式绑定到数组。

既然你的数据是一个散列，而不是一个数组，你需要先将它放入一个数组的形式。这很容易使用d3.map()与theData（我建议去除内theData周围的哈希数组[]包装，因为它没有做任何事情，但仍然）：

d3.map(theData[0]).entries() 
/* returns [ 
    { 
    "key": "FB", 
    "value": 4 
    }, 
    { 
    "key": "Mv", 
    "value": 4 
    }, 
    { 
    "key": "CB", 
    "value": 5 
    }, 
    { 
    "key": "SL", 
    "value": 3 
    }, 
    { 
    "key": "CH", 
    "value": 2 
    }, 
    ... 
]" 

一旦有了这种关联数组，你可以做平常data(...)结合，追加圆圈，然后用一些定位他们像

.attr("x", function(d) { return x(d.key); })