Javascript D3叠加条形图_Javascript_D3.js

Javascript D3叠加条形图

javascript d3.js

Javascript D3叠加条形图,javascript,d3.js,Javascript,D3.js,我想用d3创建堆叠条形图。我将此数据保存在CSV文件中：类型和颜色常规29756.85897绿色普通9756.85897蓝色我希望每一行在Y轴上都显示在另一行的上方。例如，在这张照片中，蓝色区域应该从y=9756开始，直到y=39512 我应该换什么这是相关的html代码：整个代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> bo

我想用d3创建堆叠条形图。我将此数据保存在CSV文件中：


类型和颜色
常规29756.85897绿色
普通9756.85897蓝色

我希望每一行在Y轴上都显示在另一行的上方。

例如，在这张照片中，蓝色区域应该从y=9756开始，直到y=39512

我应该换什么

这是相关的html代码：

整个代码：

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
 margin:auto;
}

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

.bar1 {
  fill: #00FF66;

}

.bar1:hover {
  fill: black ;
}

.x.axis path {
  display: none;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>
<body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>

var margin = {top: 80, right: 90, bottom: 30, left: 90},
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");
//יצירת X
//יאכלס את סוגי הרכב השונים
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
//יצירת ציר y
//יציג בר עבור מחיר הרכב המוצע לדילרים
var y = d3.scale.linear()
    .range([height, 0]);


var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

//יצירת ציר הY
//והצמדתו לצד שמאל
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left").ticks(4)

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong></strong>"+d.Type+"<br><strong></strong> <span style='color:#00FF66'>" + d.Sum + "</span>";
  })




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 + ")");

svg.call(tip);
//קליטת הטבלה והגדרת הטווחים על הצירים
d3.csv("Targil2.csv", type, function(error, data) {
  x.domain(data.map(function(d) { return d.Type; }));
  y.domain([0, d3.max(data, function(d) { return d.Sum*2; })]);

  var stack = d3.layout.stack();
  .x(function(d) { return d.Type }) // tell d3 to use Type as x value
  .y(function(d) { return d.Sum }); // tell d3 to use Sum as y value
   var stackData = stack(data);

 //הוספה של 2 הצירים
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
  .attr("class", "y axis axisLeft")
  .attr("transform", "translate(0,0)")
  .call(yAxis)
.append("text")
  .attr("y", 6)
  .attr("dy", "-2em")
  .style("text-anchor", "end")
  .style("text-anchor", "end")
  .text("Price");


//הוספת בר הנתונים
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")

      .attr("x", function(d) { return x(d.Type); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return d.y0 })
      .attr("height", function(d) { return (height - y(d.Sum)); })

      .style("fill", function(d){
         if(d["Color"] == "green"){  return "green";}

         else return "#0066FF";})

      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)

});

function type(d) {
  d.Sum = +d.Sum;

  return d;
}

</script>
</body>
</html>


身体{
字体：10px无衬线；
保证金：自动；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.bar1{
填充：#00FF66；
}
.bar1:悬停{
填充：黑色；
}
.x轴路径{
显示：无；
}
.d3提示{
线高：1；
字体大小：粗体；
填充：12px；
背景：rgba（0,0,0,0.8）；
颜色：#fff；
边界半径：2px；
}
/*为工具提示创建一个小三角形延长线*/
.d3提示：之后{
框大小：边框框；
显示：内联；
字体大小：10px；
宽度：100%；
线高：1；
颜色：rgba（0,0,0,0.8）；
内容：“\25BC”；
位置：绝对位置；
文本对齐：居中；
}
/*以不同方式设置向北工具提示的样式*/
第三点提示n：之后{
保证金：-1px0；
最高：100%；
左：0；
}
var margin={顶部：80，右侧：90，底部：30，左侧：90}，
宽度=1000-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var formatPercent=d3.format（“.0%”）；
//יציתX
//יאכלס את סוגי הרכב השונים
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
//יצרתצרy
//יציג בר עבור מחיר הרכב המוצע לדילרים
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
//יצרתצרההY
//והצמדתו לצד שמאל
var yAxis=d3.svg.axis（）
.比例（y）
.方向（“左”）.刻度（4）
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
返回“”+d.Type+”
“+d.Sum+”；
})
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.call（tip）；
//קליטת הטבלה והגדרת הטווחים על הצירים
d3.csv（“target2.csv”），类型、功能（错误、数据）{
x、 域（data.map（函数（d）{返回d.Type；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.Sum*2；}）]；
var stack=d3.layout.stack（）；
.x（函数（d）{返回d.Type}）//告诉d3使用Type作为x值
.y（函数（d）{返回d.Sum}）；//告诉d3使用Sum作为y值
var stackData=堆栈（数据）；
//הוספה של 2 הצירים
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”，“y轴左”）
.attr（“转换”、“转换（0,0）”）
.呼叫（yAxis）
.append（“文本”）
.attr（“y”，6）
.attr（“dy”，“2em”）
.style（“文本锚定”、“结束”）
.style（“文本锚定”、“结束”）
.文本（“价格”）；
//הוספת בר הנתונים
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“x”，函数（d）{返回x（d.Type）；}）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{return d.y0}）
.attr（“height”，函数（d）{return（height-y（d.Sum））；}）
.样式（“填充”，功能（d）{
如果（d[“Color”]=“green”）{返回“green”}
否则返回“#0066FF”}）
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）
});
功能类型（d）{
d、 Sum=+d.Sum；
返回d；
}

我试着像你告诉我的那样使用堆栈函数，并更改了“y”的属性，但现在对我不起作用。我想我做错了什么。首先，我想当你说

例如，在这张照片中，蓝色区域应该从y=9756开始，直到 y=39512

你是说

例如，在这张照片中，蓝色区域应该从y=29756开始，直到 y=39512
所发生的情况是，您的绿色区域从
0
到
29756
，然后顶部的蓝色区域从
0
到
9756
。您需要将每个区域移到上一个区域的顶部。最简单的方法是对数据进行预处理。 D3.js可以为您完成，请参阅。这将计算所有层的
y0
和
y
编辑：

var stack = d3.layout.stack() .x(function(d) { return d.Type }) // tell d3 to use Type as x value .y(function(d) { return d.Sum }); // tell d3 to use Sum as y value var stackData = stack(data);
之后，您的数据将被扩充，即每个条目包含一个附加的
y
和
y0
值，您可以直接使用这些值（在
y
和
height
属性中）进行绘图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { font: 10px sans-serif; margin:auto; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar1 { fill: #00FF66; } .bar1:hover { fill: black ; } .x.axis path { display: none; } .d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 2px; } /* Creates a small triangle extender for the tooltip */ .d3-tip:after { box-sizing: border-box; display: inline; font-size: 10px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); content: "\25BC"; position: absolute; text-align: center; } /* Style northward tooltips differently */ .d3-tip.n:after { margin: -1px 0 0 0; top: 100%; left: 0; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> <script> var margin = {top: 80, right: 90, bottom: 30, left: 90}, width = 1000 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var formatPercent = d3.format(".0%"); //יצירת X //יאכלס את סוגי הרכב השונים var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); //יצירת ציר y //יציג בר עבור מחיר הרכב המוצע לדילרים var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); //יצירת ציר הY //והצמדתו לצד שמאל var yAxis = d3.svg.axis() .scale(y) .orient("left").ticks(4) var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) { return "<strong></strong>"+d.Type+"<br><strong></strong> <span style='color:#00FF66'>" + d.Sum + "</span>"; }) 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 + ")"); svg.call(tip); //קליטת הטבלה והגדרת הטווחים על הצירים d3.csv("Targil2.csv", type, function(error, data) { window.dataSet = data; data.sort(function(x,y){ var a = x.Sum; var b = y.Sum; return a > b ? -1 : a < b ? 1 : 0 }) x.domain(data.map(function(d) { return d.Type; })); y.domain([0, d3.max(data, function(d) { return d.Sum*2; })]); var stack = d3.layout.stack() .x(function(d) { return d.Type }) // tell d3 to use Type as x value .y(function(d) { return d.Sum }); // tell d3 to use Sum as y value // var stackData = stack(data); //הוספה של 2 הצירים svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis axisLeft") .attr("transform", "translate(0,0)") .call(yAxis) .append("text") .attr("y", 6) .attr("dy", "-2em") .style("text-anchor", "end") .style("text-anchor", "end") .text("Price"); var stackSoFar = 0; //הוספת בר הנתונים svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("x", function(d) { return x(d.Type); }) .attr("width", x.rangeBand()) .attr("y", function(d){ d3.select(this) .attr("height", function(d2){ var thisHeight = height - y(d.Sum); stackSoFar += thisHeight return thisHeight }); return (height - stackSoFar) }) .style("fill", function(d){ if(d["Color"] == "green"){ return "green";} else return "#0066FF";}) .on('mouseover', tip.show) .on('mouseout', tip.hide) }); function type(d) { d.Sum = +d.Sum; return d; } </script> </body> </html>

身体{ 字体：10px无衬线；保证金：自动； } .轴线路径， .轴线{ 填充：无；行程：#000；形状渲染：边缘清晰； } .bar1{ 填充：#00FF66； } .bar1:悬停{ 填充：黑色； } .x轴路径{ 显示：无； } .d3提示{ 线高：1；字体大小：粗体；填充：12px；背景：rgba（0,0,0,0.8）；颜色：#fff；边界半径：2px； } /*为工具提示创建一个小三角形延长线*/ .d3提示：之后{ 框大小：边框框；显示：内联；字体大小：10px；宽度：100%；线高：1；颜色：rgba（0,0,0,0.8）；内容：“\25BC”；位置：绝对位置；文本对齐：居中； } /*以不同方式设置向北工具提示的样式*/ 第三点提示n：之后{ 保证金：-1px0；最高：100%；左：0； } var margin={顶部：80，右侧：90，底部：30，左侧：90}，宽度=1000-margin.left-margin.right，高度=500-margin.top-margin.bottom； var formatPercent=d3.format（“.0%”）； //יציתX //יאכלס את סוגי הרכב השונים var x=d3.scale.ordinal（） .rangeRoundBands（[0，宽度]，.1）； //יצרתצרy //יציג בר עבור מחיר הרכב המוצע לדילרים 变量y=d3.scale.linear（） .范围（[高度，0]）； var xAxis=d3.svg.axis（） .比例（x）