Javascript d3.js如何向Marimekko图表添加文本_Javascript_D3.js_Marimekko Chart

Javascript d3.js如何向Marimekko图表添加文本

javascript d3.js

Javascript d3.js如何向Marimekko图表添加文本,javascript,d3.js,marimekko-chart,Javascript,D3.js,Marimekko Chart,我正在尝试向工作的Marimekko图表添加文本。我知道向rect添加文本需要rect和文本在一个组中。但是我用作基础的代码已经使用了一个组。这是我的主要问题，但我也想让x轴显示月份，而不是%值。这个任务对于马里梅科海图来说是不可能的吗 <div id="chart"> </div> <div id="legend"> </div> <script> var width = 800, height

我正在尝试向工作的Marimekko图表添加文本。我知道向rect添加文本需要rect和文本在一个组中。但是我用作基础的代码已经使用了一个组。这是我的主要问题，但我也想让x轴显示月份，而不是%值。这个任务对于马里梅科海图来说是不可能的吗

<div id="chart">&nbsp;</div>
<div id="legend">&nbsp;</div>
<script>

var width = 800,
height = 500,
margin = 20;

var color = d3.scale.category10();

var x = d3.scale.linear()
.range([0, width - 3 * margin]);

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

var n = d3.format(",d"),
p = d3.format("%");

var svg = d3.select("#chart") .append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + 2 * margin + "," + margin + ")");

d3.json("/mydrupal/sites/default/d3_files/json/marimekko6.json", function(error,data) {
var offset = 0;

// Nest values by month. We assume each month + cause is unique.
var months = d3.nest()
  .key(function(d) { 
     return d.month; 
     })
  .entries(data);

// Compute the total sum, the per-month sum, and the per-cause offset.
// You can use reduce rather than reduceRight to reverse the ordering.
// We also record a reference to the parent cause for each month.
var sum = months.reduce(function(v, p) {
return (p.offset = v) + (p.sum = p.values.reduceRight(function(v, d) {
    d.parent = p;
    return (d.offset = v) + d.deaths;
    }, 0));
}, 0);

// Add x-axis ticks.
var xtick = svg.selectAll(".x")
  .data(x.ticks(10))
.enter().append("g")
  .attr("class", "x")
  .attr("transform", function(d) { 
     return "translate(" + x(d) + "," + y(1) + ")"; 
     });
xtick.append("line")
  .attr("y2", 6)
  .style("stroke", "#000");
xtick.append("text")
  .attr("y", 8)
  .attr("text-anchor", "middle")
  .attr("dy", ".71em")
  .text(p);

// Add y-axis ticks.
var ytick = svg.selectAll(".y")
  .data(y.ticks(10))
.enter().append("g")
  .attr("class", "y")
  .attr("transform", function(d) { 
     return "translate(0," + y(1 - d) + ")"; 
   });
ytick.append("line")
  .attr("x1", -6)
  .style("stroke", "#000");
ytick.append("text")
  .attr("x", -8)
  .attr("text-anchor", "end")
  .attr("dy", ".35em")
  .text(p);

// Add a group for each cause.
var months = svg.selectAll(".month")
  .data(months)
.enter().append("g")
  .attr("class", "month")
  .attr("xlink:title", function(d) { return d.key; })
  .attr("transform", function(d) { 
     return "translate(" + x(d.offset / sum) + ")"; 
   });

// Add a rect for each month.
 var causes = months.selectAll (".cause")
  .data(function(d) { return d.values; })
.enter().append("a")
  .attr("class", "month")
  .attr("xlink:title", function(d) { return d.cause + " " + d.parent.key + ": " + n(d.deaths); })
.append("rect")
  .attr("y", function(d) { 
     return y(d.offset / d.parent.sum); })
  .attr("height", function(d) { 
     return y(d.deaths / d.parent.sum); })
  .attr("width", function(d) { 
     return x(d.parent.sum / sum); })
  .style("fill", function(d) { 
     return color(d.cause); 
  });

});

</script>


可变宽度=800，
高度=500，
保证金=20；
var color=d3.scale.category10（）；
var x=d3.scale.linear（）
.范围（[0，宽度-3*边距]）；
变量y=d3.scale.linear（）
.范围（[0，高度-2*裕度]）；
var n=d3.格式（“，d”），
p=d3.格式（“%”）；
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“转换”（+2*边距+）、“+边距+”）；
d3.json（“/mydrupal/sites/default/d3_files/json/marimekko6.json”），函数（错误，数据）{
var偏移=0；
//按月嵌套值。我们假设每个月+原因都是唯一的。
var月数=d3.nest（）
.key（函数（d）{
返回d.month；
})
.条目（数据）；
//计算总金额、每月金额和每原因补偿。
//您可以使用reduce而不是reduceRight来反转顺序。
//我们还记录了每个月对父原因的引用。
var总和=月数减少（函数（v，p）{
返回（p.offset=v）+（p.sum=p.values.reduceRight）（函数（v，d）{
d、 父母=p；
回报率（d.offset=v）+d.death；
}, 0));
}, 0);
//添加x轴刻度。
var xtick=svg.selectAll（“.x”）
.数据（x.ticks（10））
.enter（）.append（“g”）
.attr（“类”、“x”）
.attr（“转换”，函数（d）{
返回“translate”（“+x（d）+”，“+y（1）+”）；
});
xtick.append（“行”）
.attr（“y2”，6）
.风格（“笔划”和“#000”）；
xtick.append（“文本”）
.attr（“y”，8）
.attr（“文本锚定”、“中间”）
.attr（“dy”，“.71em”）
.案文（p）；
//添加y轴刻度。
var ytick=svg.selectAll（“.y”）
.数据（y.ticks（10））
.enter（）.append（“g”）
.attr（“类别”、“y”）
.attr（“转换”，函数（d）{
返回“translate（0），+y（1-d）+”）；
});
ytick.append（“行”）
.attr（“x1”，-6）
.风格（“笔划”和“#000”）；
ytick.append（“文本”）
.attr（“x”，-8）
.attr（“文本锚定”、“结束”）
.attr（“dy”，“.35em”）
.案文（p）；
//为每个原因添加一个组。
var months=svg.selectAll（“.month”）
.数据（月）
.enter（）.append（“g”）
.attr（“类”、“月”）
.attr（“xlink:title”，函数（d）{return d.key；}）
.attr（“转换”，函数（d）{
返回“translate（“+x（d.offset/sum）+”）；
});
//为每个月添加一个rect。
变量原因=月份。选择全部（“.cause”）
.data（函数（d）{返回d.values；}）
.enter（）.append（“a”）
.attr（“类”、“月”）
.attr（“xlink:title”，函数（d）{return d.cause+”“+d.parent.key+”：“+n（d.death）；}）
.append（“rect”）
.attr（“y”，函数（d）{
返回y（d.offset/d.parent.sum）；}）
.attr（“高度”，函数（d）{
返回y（d.死亡/d.父母总和）；}）
.attr（“宽度”，函数（d）{
返回x（d.parent.sum/sum）；}）
.style（“填充”，函数（d）{
返回颜色（d.原因）；
});
});

如上所述：

<!--HTML-->
<p>Marimekko Chart see http://bl.ocks.org/mbostock/1005090</p>
<div id="chart">&nbsp;</div>

<!--CSS-->
<style type="text/css">body {
  font: 10px sans-serif;
}

rect {
stroke: #000;
}

.label {
  font-size: 12px;
  fill: white;
}

.label2 {
  font-size: 14px;
  fill: black;
}

svg {
  shape-rendering: crispEdges;
}

#chart {
margin-bottom: 20px;
}
</style>

<!--JavaScript-->
<script>

var width = 700,
height = 500,
margin = 20;

var color = d3.scale.category20();

var x = d3.scale.linear()
 .range([0, width - 3 * margin]);

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

var n = d3.format(",d"),
 p = d3.format("%");

var svg = d3.select("#chart") .append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + 2 * margin + "," + margin + ")");

d3.json("/mydrupal/sites/default/d3_files/json/marimekko6.json", function(error,data) {
var offset = 0;

// Nest values by month. We assume each month + cause is unique.
var months = d3.nest()
  .key(function(d) { 
     return d.month; 
     })
  .entries(data);

// Compute the total sum, the per-month sum, and the per-cause offset.
// You can use reduce rather than reduceRight to reverse the ordering.
// We also record a reference to the parent cause for each month.
var sum = months.reduce(function(v, p) {
return (p.offset = v) + (p.sum = p.values.reduceRight(function(v, d) {
    d.parent = p;
    return (d.offset = v) + d.deaths;
    }, 0));
}, 0);

// Add a group for each cause.
var months = svg.selectAll(".month")
  .data(months)
.enter().append("g")
  .attr("class", "month")
  .attr("xlink:title", function(d) { 
     return d.key; })
  .attr("transform", function(d) { 
     return "translate(" + x(d.offset / sum) + ")"; 
   });

// Add a rect for each month.
 var causes = months.selectAll (".cause")
  .data(function(d) { 
     return d.values; })
.enter().append("a")
  .attr("class", "month")
  .attr("xlink:title", function(d) { 
      return d.cause + " " + d.parent.key + ": " + n(d.deaths); });

causes.append("rect")
  .attr("y", function(d) { 
     return y(d.offset / d.parent.sum); })
  .attr("height", function(d) { 
     return y(d.deaths / d.parent.sum); })
  .attr("width", function(d) { 
     return x(d.parent.sum / sum); })
  .style("fill", function(d) { 
     return color(d.cause); 
  });

// http://stackoverflow.com/questions/17574621/text-on-each-bar-of-a-stacked-bar-chart-d3-js
causes.append("text")
      .text(function(d) { 
          return d.cause + " " + n(d.deaths);})
      .attr("x", 5)
      .attr("y", function(d) { 
          return (y(d.offset / d.parent.sum)+20); })
      .attr("class", "label")
;
causes.append("text")
      .text(function(d) { 
          return (" Total: " + d.parent.sum);}) // total
      .attr("x", 5)
      .attr("y", function(d) { 
            return 450 })
      .attr("class", "label2")
;
causes.append("text")
      .text(function(d) { 
          return d.parent.key;}) // month
      .attr("x", 5)
      .attr("y", function(d) { 
            return 480; })
      .attr("class", "label2")
;
});
</script>


Marimekko图表见http://bl.ocks.org/mbostock/1005090
身体{
字体：10px无衬线；
}
直肠{
行程：#000；
}
.标签{
字体大小：12px；
填充物：白色；
}
.标签2{
字体大小：14px；
填充：黑色；
}
svg{
形状渲染：边缘清晰；
}
#图表{
边缘底部：20px；
}
可变宽度=700，
高度=500，
保证金=20；
var color=d3.scale.category20（）；
var x=d3.scale.linear（）
.范围（[0，宽度-3*边距]）；
变量y=d3.scale.linear（）
.范围（[0，高度-2*裕度]）；
var n=d3.格式（“，d”），
p=d3.格式（“%”）；
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“转换”（+2*边距+）、“+边距+”）；
d3.json（“/mydrupal/sites/default/d3_files/json/marimekko6.json”），函数（错误，数据）{
var偏移=0；
//按月嵌套值。我们假设每个月+原因都是唯一的。
var月数=d3.nest（）
.key（函数（d）{
返回d.month；
})
.条目（数据）；
//计算总金额、每月金额和每原因补偿。
//您可以使用reduce而不是reduceRight来反转顺序。
//我们还记录了每个月对父原因的引用。
var总和=月数减少（函数（v，p）{
返回（p.offset=v）+（p.sum=p.values.reduceRight）（函数（v，d）{
d、 父母=p；
回报率（d.offset=v）+d.death；
}, 0));
}, 0);
//为每个原因添加一个组。
var months=svg.selectAll（“.month”）
.数据（月）
.enter（）.append（“g”）
.attr（“类”、“月”）
.attr（“xlink:title”，函数（d）{
返回d.key；}）
.attr（“转换”，函数（d）{
返回“translate（“+x（d.offset/sum）+”）；
});
//为每个月添加一个rect。
变量原因=月份。选择全部（“.cause”）
.数据（功能（d）{
返回d.values；}）
.enter（）.append（“a”）
.attr（“类”、“月”）
.attr（“xlink:title”，函数（d）{
返回d.cause+“”+d.parent.key+”：“+n（d.death）；}）；
原因。追加（“rect”）
.attr（“y”，函数（d）{
返回y（d.offset/d.parent.sum）；}）
.attr（“高度”，函数（d）{
返回y（d.死亡/d.父母总和）；}）
.attr（“宽度”，函数（d）{
返回x（d.parent.sum/sum）；}）
.style（“填充”，函数（d）{
返回颜色（d.原因）；
});
// http://stackoverflow.com/questions/17574621/text-on-each-bar-of-a-stacked-bar-chart-d3-js
原因。追加（“文本”）
.text（功能（d）{
返回d.cause+“”+n（d.death）；}）
.attr（“x”，5）
.attr（“y”，函数（d）{
返回值（y（d.offset/d.parent.sum）+20）；}）
.attr（“类别”、“标签”）
;
原因。追加（“文本”）
.text（功能（d）{
return（“Total:+d.parent.sum）；}）//总计
.attr（“x”，5）
.attr（“y”，函数（d）{
返回450}）
.attr（“类别”、“标签2”）
;
原因。追加（“文本”）
.text（功能（d）{
返回d.parent.key；}）//月
艾特先生