javascript - x 轴的 JSON 键，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")等

要创建圆圈，您需要以典型的 d3 方式，使用输入、更新、退出功能绑定(bind)到一个数组。

由于您的数据是哈希，而不是数组，因此您需要首先将其转换为数组形式。使用 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(...) 绑定(bind)，附加圆圈，然后使用类似的内容定位它们

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