d3疊加條形圖--條形圖無法呈現 -有解無憂

D3堆積柱狀圖首次嘗試使用一個例子這里。

。

除了圖例部分，我唯一改變的部分是var data中的JSON和這一部分，以匹配資料：

var dataset = d3.layout. stack()(["alex", "Mindy", "sean", "karen"]。 map（function(fruit) {
      return data.map(function(d) {
        return {x: d3.time.format（"%Y"）。 parse(d.year), y:  d[fruit]};
      });
    }));

圖表正在呈現水平線，但沒有條形或軸。參見fiddle

//set the dimensions of the canvas。
var margin = {top: 50, right: 20, bottom: 70, left: 90}。
    寬度 = 845 - margin.left - margin.right。
    height = 540 - margin.top - margin.bottom;  


var svg = d3.select("#chart"/span>)
  .append("svg")
  .attr("width", width   margin.left   margin.right)
  .attr("height", height   margin.top   margin.bottom)
  .append("g"/span>)
  .attr("transform", "translate("   margin. left   ","   margin.top   "）"）。)

    
var data = [
    {"類別":"知識","年份1"。 3,"Year 2":0,"Year 3":2},
    {"類別":"理解","一年級"。 14,"Year 2":1,"Year 3":0},
    {"類別":"應用","年份1"。 5,"Year 2":13,"Year 3":19},
    {"類別":"分析","年份1"。 5,"Year 2":2,"Year 3":1}。
    {"類別":"綜合","年份1"。 2,"第二年":1,"第三年":5},
    {"類別":"評估","年份1"。 "6,"Year 2":22,"Year 3":0}。
];

var parse = d3.time.format("%Y"/span>).parse。


//將資料轉為層。
var dataset = d3.layout. stack()(["Year 1"/span>, "Year 2"/span>, "Year 3"/span>]。 map（function(years) {
  return data.map(function(d) {
    return {x: parse(d.Category), y:  d[年]};
  });
}));


//設定x、y和顏色 
var x = d3.scale.ordinal()
  .domain(dataset[0]。 map(function(d) { returnd.x; })
  .rangeRoundBands([10, width-10], 0.02) 。

var y = d3.scale.linear()
  .domain([0, d3. max(dataset, function(d) { returnd3. max(d, function(d) { returnd. y0   d.y; }); }) ])
  .range([height, 0] ）。)

var colors = ["b33040"/span>, "#d25c4d"/span>, "#f2b447"/span>, "#d9d574"/span>] 。


//定義和繪制坐標軸。
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(5)
  .tickSize(-width, 0, 0)
  .tickFormat( function(d) { return d }. );

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom"/span>)
  .tickFormat(d3.time.format("%Y") )。

svg.append("g")
  .attr("class", "y軸")
  .call（yAxis）。

svg.append("g")
  .attr("class", "X axis")
  .attr("transform", "translate(0,"   height   )")
  .call（xAxis）。


//為每個系列創建組，為每個段創建矩形。
var groups = svg.selectAll("g.cost" )
  .data(dataset)
  .enter().append("g")
  .attr("class"/span>, "cost")
  .style("fill", function(d, i) { return colors[i]; }) 。

var rect = groups.selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect"/span>)
  . attr("x", function(d) { return x(d。 x); })
  . attr("y", function(d) { return y（d. y0   d.y）; })
  . attr("height"。function(d) { return y（d. y0) - y(d.y0   d.y); })
  .attr("width"/span>, x.rangeBand()
  .on("mouseover", function() { tooltip。 style("display"/span>, null); })
  .on("mouseout", function() { tooltip。 style("display"/span>, "none"); })
  .on("mousemove"/span>, function(d) {
    var xPosition = d3.mouse(this) [0] - 15;
    var yPosition = d3.mouse(this) [1] - 25;
    工具提示。 attr("transform", "translate("   xPosition   ","   yPosition   "))。
    tooltip.select("text").text（d.y）。
  });


//畫出圖例。
var legend = svg.selectAll(" .legend")
  .data(color)
  .enter().append("g"/span>)
  .attr("class"，"legend")
  . attr("transform"/span>, function(d, i) { return "translate(30,"   i * 19   ") "。});
 
legend.append("rect")
  .attr("x"/span>, width - 18)
  .attr("width"/span>, 18)
  .attr("height", 18)
  .style("fill", function(d, i) {return colors. slice().reverse()[i];}）。)
 
legend.append("text"/span>)
  .attr("x", width   5)
  .attr("y"，9)
  .attr("dy", " .35em")
  .style("text-anchor"/span>, "start")
  .text(function(d, i) { 
    switch (i) {
      case 0: return "Year 1"。
      case 1: return "Year 2";
      case 2: return "Year 3"。
    }
  });


//Prep the tooltip bits, initial display is hidden[/span
var tooltip = svg.append("g"/span>)
  .attr("class"/span>, "tooltip")
  .style("display", "none") 。
    
tooltip.append("rect")
  .attr("width", 30)
  .attr("height", 20)
  .attr("fill"/span>, "white")
  .style("opacity", 0.5) 。

tooltip.append("text")
  .attr("x", 15)
  .attr("dy"/span>, "1.2em")
  .style("text-anchor"/span>, "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold") 。

uj5u.com熱心網友回復：

你使用的例子的X軸值是日歷年，用d3.time.format()進行決議。由于你使用的是文本（非日歷）值，你需要調整代碼，以洗掉日期決議和軸標簽的格式化。

移除這一點，并為圖例的右邊緣添加空間，似乎可以實作你的目標。

。

//set the dimensions of the canvas.
var margin = {
    top: 50,
    right: 90, //為圖例添加空間。
    bottom: 70,
    left: 90, left.
  },
  寬度 = 845 - margin.left - margin.right。
  height = 540 - margin.top - margin.bottom;


var svg = d3.select("#chart"/span>)
  .append("svg")
  .attr("width", width   margin.left   margin.right)
  .attr("height", height   margin.top   margin.bottom)
  .append("g"/span>)
  .attr("transform", "translate("   margin. left   ","   margin.top   "）"）。)


var data = [{ {
    "類別"。"知識"。
    "年份1": 3,
    "Year 2": 0,
    "Year 3": 2。
  },
  {
    "類別": "comprehension",
    "一年級": 14,
    "Year 2": 1,
    "Year 3": 0。
  },
  {
    "類別": "應用",
    "年份1": 5,
    "Year 2": 13,
    "Year 3": 19。
  },
  {
    "類別": "分析",
    "年份1": 5,
    "Year 2": 2,
    "Year 3": 1。
  },
  {
    "類別": "Synthesis",
    "年份1": 2,
    "Year 2": 1,
    "Year 3": 5。
  },
  {
    "類別": "評價",
    "年份1": 6,
    "Year 2": 22,
    "Year 3": 0.
  }
];

//not required 
//var parse = d3.time.format("%Y").parse;

//span>將資料轉為層數
var dataset = d3.layout. stack()(["Year 1"/span>, "Year 2"/span>, "Year 3"/span>]。 map（function(years) {
  return data.map(function(d) {
    return {
      //這不是一個日歷日期 - 不要把它決議為一個日歷日期。
      //x: parse(d.Category) 
      x: d.Category,
      y: d[year]
    };
  });
}));

//設定x、y和顏色 y: d[year].
var x = d3.scale.ordinal()
  .domain(dataset[0].map(function(d) {
    return d.x;
  }))
  .rangeRoundBands([10, width - 10], 0.02) 。

var y = d3.scale.linear()
  .domain([0, d3.max(dataset, function(d) {
    return d3.max（d, function(d) {
      return d.y0   d.y;
    });
  })])
  .range([height, 0] ）。)

var colors = ["b33040"/span>, "#d25c4d", "#f2b447"]//, "#d9d574"] 。 


//定義和繪制軸線。
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(5)
  .tickSize(-width, 0, 0)
  .tickFormat（function(d) {
    return d
  });

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom"/span>)
  //不使用日歷日期。
  //.tickFormat(d3.time.format("%Y")); 

svg.append("g"/span>)
  .attr("class", "y軸")
  .call（yAxis）。

svg.append("g")
  .attr("class", "X axis")
  .attr("transform","translate(0," height ") ")
  .call(xAxis)


//為每個系列創建組，為每個段創建矩形。
var groups = svg.selectAll("g.cost" /span>)
  .data(dataset)
  .enter().append("g")
  .attr("class"/span>, "cost")
  .style("fill", function(d, i) {
    return colors[i];
  });

var rect = groups.selectAll("rect")
  .data(function(d) {
    return d。
  })
  .enter()
  .append("rect"/span>)
  .attr("x"/span>, function(d) {
    return x（d.x）。
  })
  .attr("y"/span>, function(d) {
    return y(d.y0   d.y) 。
  })
  .attr("height"/span>, function(d) {
    return y（d. y0) - y(d.y0   d.y) 。
  })
  .attr("width"/span>, x.rangeBand()
  .on("mouseover", function(>/span>) {
    tooltip.style("display", null)。
  })
  .on("mouseout"/span>, function() {
    tooltip.style("display", "none") 。
  })
  .on("mousemove"/span>, function(d) {
    var xPosition = d3.mouse(this) [0] - 15;
    var yPosition = d3.mouse(this)[1] -25;
    工具提示。 attr("transform", "translate("   xPosition   ","   yPosition   "))。
    tooltip.select("text").text（d.y）。
  });


//畫出圖例。
var legend = svg.selectAll(" .legend")
  .data(color)
  .enter().append("g"/span>)
  .attr("class", " legend")
  .attr("transform", function(d, i) {
    return "translate(30,"   i * 19   "）"。
  });

legend.append("rect")
  .attr("x"/span>, width - 18)
  .attr("width"/span>, 18)
  .attr("height", 18)
  .style("fill", function(d, i) {
    return colors.slice().reverse() [i];
  });

legend.append("text"/span>)
  .attr("x", width   5)
  .attr("y"，9)
  .attr("dy", " .35em")
  .style("text-anchor"/span>, "start")
  .text(function(d, i) {
    switch (i) {
      case 0:
        return "Year 1"。
      case 1:
        return "Year 2";
      case 2:
        return "Year 3"。
    }
  });

//Prep the tooltip bits, initial display is hidden[/span
var tooltip = svg.append("g"/span>)
  .attr("class"/span>, "tooltip")
  .style("display", "none") 。

tooltip.append("rect")
  .attr("width", 30)
  .attr("height", 20)
  .attr("fill"/span>, "white")
  .style("opacity", 0.5) 。

tooltip.append("text")
  .attr("x", 15)
  .attr("dy"/span>, "1.2em")
  .style("text-anchor"/span>, "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold");

svg {
  font: 10px sans-serif;
  形狀渲染: crispEdges;
}

.axis path,
.axis line {
  填充：無。
  描邊。#000;
}

path.domain {
  描邊：無。
}

.y .tick line {
  行程。#ddd;
}

<script src="https://cdnjs. cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>/span>
<div id='chart'/span>> </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/320661.html

標籤：

上一篇：當從通過d3.js創建的下拉選擇框中選擇一個選項時，發送到按鈕的值變得未定義。

下一篇：d3從時間戳中決議時間的方法不當