D3.js D3JS上的简单条形图

我是这个库的新手，我不明白为什么矩形条有负值。我使用带有jsdom的d3节点（D3V4）从服务器渲染svg

这就是我所尝试的：

var data = [
{
  "name" : "Nom Prénom",
  "value1" : 40,
  "value2" : 100,
  "value3" : 10,
  "total" : 150 //a changer
}
];

var margin = {top: 20, right: 160, bottom: 35, left: 30};

var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;


 var svg = this.d3n
        .createSVG(GRAPH_WIDTH - MARGINS.left - MARGINS.right - LEGEND_PANEL.width, GRAPH_HEIGHT - MARGINS.top - MARGINS.bottom)
        .append('g');


var stack = d3.stack().keys(["value1","value2","value3"]).order(d3.stackOrderNone).offset(d3.stackOffsetNone);

 var dataSet = stack(data);

  //set x, y and colors

  var x = d3.scaleBand()
      .range([0, width]);

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

  var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];


   //define and draw axis 
  var xAxis = d3.axisBottom(x);
  var yAxis = d3.axisLeft(x).ticks(5).tickFormat(function(d){ return d;});

  svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

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



 // Create groups for each series, rects for each segment 
 var groups = svg.selectAll("g.cost")
  .data(dataSet)
  .enter().append("g")
  .attr("class", "cost")
  .style("fill", function(d, i) { return colors[i]; });

var rect = groups.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("x", function(d) { 
  return x(d[0]);
 })
.attr("y", function(d) { return y(d[0] + d[1]); })
.attr("height", function(d) { return y(d[0]); })
.attr("width", x.bandwidth())
.on("mouseover", function() { tooltip.style("display", null); })
.on("mouseout", function() { tooltip.style("display", "none"); })
.on("mousemove", function(d) {
  var xPosition = d3.mouse(this)[0] - 15;
  var yPosition = d3.mouse(this)[1] - 25;
  tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
  tooltip.select("text").text(d.y);
});

svg是这样的

---

首先，高度和宽度似乎存在一些问题：

var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

为我们提供

width=770

和

height=445

。但是

.createSVG(GRAPH_WIDTH - MARGINS.left - MARGINS.right - LEGEND_PANEL.width, GRAPH_HEIGHT - MARGINS.top - MARGINS.bottom)

结果是

然后，由于

y.scaleLinear

声明中缺少域部分，您将获得负的

height

和

y

：

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

应该是这样的：

 var y = d3.scaleLinear()
        .domain([0, 150])
        .range([height, 0])

D3

scaleLinear（）

返回一个函数，该函数将数据维度中的每个点（在本例中为[0，150]，其中数据中的0和150最小值以及最大可能值）转换为其视觉坐标，然后用于绘图。也就是说，它映射[0,150]->[445,0]

为了得到更好的理解，我建议阅读。第一段中还提到了三个教程

即使您找到了v3教程，也可能值得一读，其思想保持不变，只是保持开放，以验证如何在v4中编写相同的代码。列出了最大的教程集