Javascript 如何获取d3.js图表的JSON键_Javascript_Html_D3.js

Javascript 如何获取d3.js图表的JSON键

javascript html d3.js

Javascript 如何获取d3.js图表的JSON键,javascript,html,d3.js,Javascript,Html,D3.js,这里是我的问题：我需要一个包含JSON对象的数组，我想获取JSON对象的键，用它构建一个条形图这是我的阵列： var dataset = [{ "T1": 4.23 }, { "T2": 45.62 }, { "T3": 24.78 }, { "T4": 11.41 }, { "T5": 5.19 }, { "T6": 5.15 },

这里是我的问题：我需要一个包含JSON对象的数组，我想获取JSON对象的键，用它构建一个条形图

这是我的阵列：

var dataset = [{
      "T1": 4.23
    },
    {
      "T2": 45.62
    },
    {
      "T3": 24.78
    },
    {
      "T4": 11.41
    },
    {
      "T5": 5.19
    },
    {
      "T6": 5.15
    },
    {
      "T7": 1.99
    },
    {
      "T8": 0.93
    },
    {
      "T9": 0.61
    }
  ];

下面是我绘制图表的代码：

  let width = 500;
  let heigth = 200;
  let barPadding = 1;

  let svg = d3.select("#containerChart")
    .append("svg")
    .attr("width", width)
    .attr("height", heigth);


  svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function (d, i) {
      return i + (20 + barPadding);
    })
    .attr("y", function (d) {
      return heigth - (**values of JSON object** * 2)
    })
    .att("width", 20)
    .attr("heigth", function (d) {
      return (**values of JSON object** * 2)
    })
    .attr("fill", "teal")

你知道我该怎么做吗

提前感谢您的帮助

这个应该可以：

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function (d, i) {
      return i + (20 + barPadding);
    })
    .attr("y", function (d,i) {

      return heigth - d["T" + (i+1)]
    })
    .attr("width", 20)
    .attr("heigth", function (d,i) {
      return heigth - d["T" + (i+1)]
    })
    .attr("fill", "teal")

以下是在本地服务器上进行测试的代码：

<!DOCTYPE html>
<meta charset="utf-8">

<head>
    <style>

  .bar{
    fill: steelblue;
  }

  .bar:hover{
    fill: brown;
  }

    .axis {
      font: 10px sans-serif;
    }

    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    </style>
</head>

<body>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
// set the dimensions of the canvas
var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;


// set the ranges
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

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

// define the axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")


var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);


// add the SVG element
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");


// load the data
d3.json("data.json", function(error, data) {


  // scale the range of the data
  x.domain(data.map(function(d) { return Object.keys(d); }));
  y.domain([0, d3.max(data, function(d) { return +d[Object.keys(d)]; })]);

  // add axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 5)
      .attr("dy", ".71em")
      .style("text-anchor", "end");

  // Add bar chart
  svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(Object.keys(d)); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(+d[Object.keys(d)]); })
      .attr("height", function(d) { return height - y(+d[Object.keys(d)]); });

});

</script>

</body>


.酒吧{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
//设置画布的尺寸
var margin={顶部：20，右侧：20，底部：70，左侧：40}，
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
//设定范围
var x=d3.scale.ordinal（）.rangeRoundBands（[0，宽度]，.05）；
变量y=d3.scale.linear（）.range（[height，0]）；
//定义轴
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.蜱（10）；
//添加SVG元素
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//加载数据
d3.json（“data.json”），函数（错误，数据）{
//缩放数据的范围
x、 域（data.map（函数（d）{returnobject.keys（d）；}））；
y、 域（[0，d3.max（数据，函数（d）{return+d[Object.keys（d）]；}）]）；
//添加轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“-.55em”）
.attr（“变换”、“旋转（-90）”）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，5）
.attr（“dy”，“.71em”）
.样式（“文本锚定”、“结束”）；
//添加条形图
svg.selectAll（“条”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{return x（Object.keys（d））；}）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（+d[Object.keys（d）]；}）
.attr（“height”，函数（d）{返回height-y（+d[Object.keys（d）]；}）；
});

我使用Object.keys（）将y轴的所有引用替换为json键，并将这些键的值放入x轴。您还可以将

用于。。。在

循环中执行相同的操作

要在本地进行测试，您必须在本地服务器上托管这两个文件，否则将出现CORS错误。您可以包含一个经过解析的内联json以完全避免COR。

好吧，要获取任何javascript对象的“键”，请使用

object.keys（obj）

——但在您的例子中，您有一个对象数组，每个对象都有自己的特殊键。你想从数组中获取所有唯一键的列表吗？仅供参考：是高度，不是高度。。。在任何情况下，

**JSON对象**

的值似乎表明您想要的是值，而不是键，因为将“T1”乘以2没有意义。你想要钥匙的号码吗？这些值的总和是多少？