水平条形图D3，.txt文件 [英] Horizontal Bar Chart D3, .txt file

问题描述

我有一个名为data.txt的数据集，如下所示：

  {class：'C 1'，nums ：{A：716，B：1287，C：249}} 
 
，{class：'C 2'，nums：{A：2000，B：1876，C：3009}} 
 
，{class：'C 3'，nums：{A：899，B：2333，C：418}} 
  

我想为这个数据制作一个带有d3 v3的水平条形图。我想做的是A + B + C的总和在酒吧，但当你悬停在他们的图例显示A，B，C值。我想这个图表上的标签是C 1，C 2和C 3.我在阅读这些数据时遇到问题。我正在尝试

  d3.text（data.text，function（d）{
 return {
 label：d.class，
 Q1：+ d.nums [1]，
 Q2：+ d.nums [2]，
 Q3：+ d.nums [3] 
 Q4：+ d.nums [4]，
总计：Q1 + Q2 + Q3 + Q4 
}; 
}，function（data）{
 console。 log（data [0]）; 
}）; 
  

但是，我无法获取要渲染的数据。
我看了这里 http://learnjsdata.com/read_data.html ，但这没有帮我。我也将尝试并按照这个条形图 http://bl.ocks.org/juan- cb / faf62e91e3c70a99a306 ，让它看起来像我想要的。

任何人都可以帮助我建立这个图表并读取这些数据。谢谢。

解决方案

在文本文件中使用该结构没有什么意义。 d3.text 将无法解析它。因为你有嵌套对象的对象，你可能想使用 d3.json 。

此数据在有效的JSON中，将其转换为对象数组：

  [
 {class： C 1，nums：{A：716，B：1287，C：249}}，
 {class：C 2，nums：{A ：2000，B：1876，C：3009}}，
 {class：C 3，nums：{A：899，B：2333， C：418}} 
] 
  

c> d3.json ：

  d3.json（data.json，function ）{
 //您的代码在这里
}）; 
  

但是，正如你在问题中所说，你想使用 nums 对象。我们可以创建另一个名为 total ：

 的键/值对。 forEach（function（d）{
 var values = 0; 
 for（var key in d.nums）{
 values + = d.nums [key] 
} 
 d.total = values; 
}）; 
  

现在您已拥有栏所需的一切： total 将用于宽度和 nums 对象的工具提示。

这里是一个演示片段， （因为在代码段中使用外部文件很困难）：

  data = [{class：C 1，nums：{A：716，B：1287，C：249}}，{class： C，nums：{A：899，C，nums：{A：2000，B：1876，C：3009} B：2333，C：418}}]; data.forEach（function（d）{var values = 0; for（var key in d.nums）{values + = d.nums [key]} d .total = values;}）; var div = d3.select（body）append（div）。attr（class，toolTip）; var xScale = scale = d3.scale.linear .domain（[0，d3.max（data，function（d）{return d.total;}）] .range（[0,400]）; var svg = d3.select（'body'）.append svg）.attr（width，400）.attr（height，400）; var bars = svg.selectAll（。rects）.data（data）.enter ）; bars.attr（x，0）.attr（y，function（d，i）{return i * 50}）.attr（height，40）.attr（fill，teal ）.attr（width，function（d）{return xScale（d.total）}）; bars.on（mousemove，function（d）{div.style（left，d3.event.pageX +10+px）。style（top，d3.event.pageY-25 +px）style（display，inline-block）。html（All the values：A = + d.nums.A +，B =+ d.nums.B +，C =+ d.nums.C）; }）。on（mouseout，function（d）{div.style（display，none）;}）;    .toolTip {position：absolute; display：none; width：auto; height：auto; padding：5px; background-color：white; border：1px solid black; }  

 < script src =https：// cdnjs .cloudflare.com / ajax / libs / d3 / 3.4.11 / d3.min.js>< / script>  

I have a dataset called data.txt that looks like the following:

{class:'C 1',nums:{A:716, B:1287, C:249}}

,{class:'C 2',nums:{A:2000, B:1876, C:3009}}

,{class:'C 3',nums:{A:899, B:2333, C:418}}

I am trying to make a horizontal bar chart with d3 v3 for this data. What I want to do is have the sum of A + B + C be on the bars but when you hover over them the legend shows A, B, C values. I want the labels on this chart to be C 1, C 2, and C 3. I am having trouble reading in this data. I am trying

d3.text("data.text",function(d) {
return {
label: d.class, 
Q1: +d.nums[1],
Q2: +d.nums[2],
Q3: +d.nums[3],
Q4: +d.nums[4],
total: Q1+Q2+Q3+Q4        
};
}, function(data) {
console.log(data[0]);
});

However, I can't get the data to render at all. I have looked here http://learnjsdata.com/read_data.html but this did not help me. I was also going to try and follow this bar chart http://bl.ocks.org/juan-cb/faf62e91e3c70a99a306 and make it look like how I had wanted.

Can anyone please assist me with building this chart and reading this data in. Thank you.

解决方案

It doesn't make much sense using that structure in a text file. d3.text will not be able to parse it. Since you have objects with nested objects, you may want to use d3.json instead.

First, let's transform this data in a valid JSON, transforming it in an array of objects:

[
 {"class":"C 1","nums":{"A":716, "B":1287, "C":249}},
 {"class":"C 2","nums":{"A":2000, "B":1876, "C":3009}},
 {"class":"C 3","nums":{"A":899, "B":2333, "C":418}}
]

Then, we load it using d3.json:

d3.json("data.json", function(data){
    //your code here
});

But, as you said in the question, you want to use the total of the nums object for the bars. We can create another key/value pair named total:

data.forEach(function(d){
    var values = 0;
    for (var key in d.nums){
        values += d.nums[key]
    }
    d.total = values;
});

Now you have everything you need for the bars: total will be used for the width and nums object for the tooltip.

Here is a demo snippet, using a variable (because it's difficult using an external file in the snippet):

data = [{"class":"C 1","nums":{"A":716, "B":1287, "C":249}}
,{"class":"C 2","nums":{"A":2000, "B":1876, "C":3009}}
,{"class":"C 3","nums":{"A":899, "B":2333, "C":418}}];

data.forEach(function(d){
    var values = 0;
    for (var key in d.nums){
      values += d.nums[key]
    }
    d.total = values;
  });

var div = d3.select("body").append("div").attr("class", "toolTip");

var xScale = scale = d3.scale.linear()
            .domain([0, d3.max(data, function(d) { return d.total; })])
            .range([0, 400]);

var svg = d3.select('body')
            .append("svg")
            .attr("width", 400)
            .attr("height", 400);

var bars = svg.selectAll(".rects")
            .data(data)
            .enter()
            .append("rect");

bars.attr("x", 0).attr("y", function(d,i){ return i*50})
	.attr("height", 40)
.attr("fill", "teal")
	.attr("width", function(d){ return xScale(d.total)});

bars.on("mousemove", function(d){
                div.style("left", d3.event.pageX+10+"px").style("top", d3.event.pageY-25+"px").style("display", "inline-block").html("All the values: A=" + d.nums.A + ", B=" + d.nums.B + ", C=" + d.nums.C);
            }).on("mouseout", function(d){
                div.style("display", "none");
            });

.toolTip {
  position: absolute;
  display: none;
  width: auto;
  height: auto;
  padding: 5px;
  background-color: white;
  border: 1px solid black;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

这篇关于水平条形图D3，.txt文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！