Fatal编程技术网

Javascript 单根水平叠条

javascript d3.js

Javascript 单根水平叠条,javascript,d3.js,Javascript,D3.js,我正在尝试创建一个水平的单个堆叠条，用作整个图形的一部分。有点像一个饼图，但是一个条形图。我以前已经能够创建一个正常的垂直和堆叠条形图，但是我没有遇到同样的问题，并且rect元素根本没有显示出来 我已经删除了y轴，因为标签将通过图例或附加文本显示 这就是我得到的错误： d3.min.js:2未捕获类型错误：无法将未定义或null转换为 对象 在切片（）处 在函数n.范围内（d3.min.js:2） 提款时（singlestackedsharebar.html:94） 在d3.min.js:2 反

我正在尝试创建一个水平的单个堆叠条，用作整个图形的一部分。有点像一个饼图，但是一个条形图。我以前已经能够创建一个正常的垂直和堆叠条形图，但是我没有遇到同样的问题，并且rect元素根本没有显示出来

我已经删除了y轴，因为标签将通过图例或附加文本显示

这就是我得到的错误：

d3.min.js:2未捕获类型错误：无法将未定义或null转换为 对象 在切片（）处 在函数n.范围内（d3.min.js:2） 提款时（singlestackedsharebar.html:94） 在d3.min.js:2 反对。（d3.min.js:2） 在k.call（d3.min.js:2） 在XMLHttpRequest.e（d3.min.js:2）

我认为当我创建堆栈和系列时，问题就发生了。当我记录这个系列时，似乎下一个数组并没有像应该的那样从上一个数组中添加

以下是完整的代码：

function draw(data) {

  // Turns all the strings in the csv into integer values.

  data.forEach(function(d) {
    d.Total = +d.Total;
  });

  var width = document.getElementById('barchart').offsetWidth,
    height = document.getElementById('barchart').offsetHeight;

  var margin = {
    top: 50,
    right: 200,
    bottom: 140,
    left: 260
  };

  var svg = d3.select('#barchart')
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('viewBox', '0 0 ' + width + ' ' + height)
    .append('g');

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

  svg.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  // Create x and y scale.

  var xScale = d3.scaleLinear()
    .range([0, width]);

  var yScale = d3.scaleBand()
    .range([0, height])
    .padding(0.1);

  // Create domains.

  xScale.domain([0, d3.max(data, function(d) {
    return d.Total;
  })]);

  // Create axes.

  var x_axis = svg.append('g')
    .attr('class', 'axis')
    .attr('padding', 1)
    .attr('transform', 'translate(' + 0 + ',' + height + ')')
    .call(d3.axisBottom(xScale)
      .ticks(10, 's'));

  // Choose which columns to have as keys with slice method.

  var keys = data.map(function(d) {
    return d.Type;
  });

  // Create stack of the data with keys.

  var stack = d3.stack([data])
    .keys(["Total"]);

  console.log(keys);

  // Create series of the data.

  var series = stack(data);

  console.log(series);

  // Create color scale with colorbrewer or pass in array of colors.

  var colorScale = d3.scaleOrdinal()
    .domain([0, 12])
    .range(colorbrewer.Oranges[12]);

  // Append rectangles.

  var bars = svg.append('g')
    .selectAll('g')
    .data(series)
    .enter()
    .append('g')
    .attr('fill', function(d) {
      return colorScale(d.key);
    })
    .selectAll('rect')
    .data(function(d) {
      return data.d;
    })
    .enter()
    .append('rect')
    .attr('x', function(d, i) {
      return xScale(d[0]);
    })
    .attr('width', function(d, i) {
      return xScale(d[1]) - xScale(d[0]);
    });

};

<body>
d3.csv('https://raw.githubusercontent.com/dieterholger/dieterholger.github.io/master/data/disputeshare.csv', draw);
</body>

函数图（数据）{
//将csv中的所有字符串转换为整数值。
data.forEach（函数（d）{
d、 总计=+d.总计；
});
var width=document.getElementById（'barchart'）。offsetWidth，
高度=document.getElementById（'条形图'）.offsetHeight；
var保证金={
前50名，
右:200,，
底图：140，
左：260
};
var svg=d3。选择（“#条形图”）
.append（'svg'）
.attr（'width'，'100%”）
.attr（“高度”、“100%”）
.attr（'viewBox'，'0'+宽度+''+高度）
.append（'g'）；
宽度=宽度-边距.left-边距.right，
高度=高度-margin.top-margin.bottom；
attr（'transform'，'translate（'+margin.left+'，'+margin.top+'）；
//创建x和y比例。
var xScale=d3.scaleLinear（）
.范围（[0，宽度]）；
var yScale=d3.scaleBand（）
.范围（[0，高度]）
.填充（0.1）；
//创建域。
域（[0，d3.max）（数据，函数（d）{
返回d.总计；
})]);
//创建轴。
var x_axis=svg.append（'g'）
.attr（'类'，'轴'）
.attr（'填充'，1）
.attr（'transform'，'translate（'+0+'，'+height+'））
.call（d3.axisBottom（xScale）
.蜱虫（10，'s'）；
//使用slice方法选择要作为键的列。
var keys=data.map（函数（d）{
返回d.类型；
});
//使用键创建数据堆栈。
var stack=d3.stack（[数据]）
.钥匙（[“总数]）；
控制台日志（键）；
//创建一系列数据。
var系列=堆栈（数据）；
控制台日志（系列）；
//使用colorbrewer创建颜色比例或传入颜色数组。
var colorScale=d3.scaleOrdinal（）
.domain（[0，12]）
.范围（colorbrewer.橙子[12]）；
//附加矩形。
var bar=svg.append（'g'）
.selectAll（'g'）
.数据（系列）
.输入（）
.append（'g'）
.attr（'fill'，函数（d）{
返回色标（d键）；
})
.selectAll（'rect'）
.数据（功能（d）{
返回数据d；
})
.输入（）
.append（'rect'）
.attr（'x'，函数（d，i）{
返回xScale（d[0]）；
})
.attr（'width'，函数（d，i）{
返回xScale（d[1]）-xScale（d[0]）；
});
};
d3.csv（'https://raw.githubusercontent.com/dieterholger/dieterholger.github.io/master/data/disputeshare.csv",抽签),；
这里有很多问题。首先是小问题：

  • 矩形必须具有
    y
    和
    height
    属性
  • 您正在“输入”选择中选择现有图元（而不是使用）
  • 您的x比例使用最大总值作为顶级域值。相反，它应该是总和
    • 但是，到目前为止，这里最重要的问题是堆栈生成器。您不能将堆栈生成器与您拥有的数据一起使用，这是

    [
    {2015: "1528", 2016: "1187", Type: "Disputed Settlement Criteria/Bet Instructions", Total: 2715},
    {2015: "999", 2016: "676", Type: "Price Dispute", Total: 1675},
    {2015: "571", 2016: "299", Type: "Late Bets", Total: 870}
    //etc...
];
    …用于创建单个条形图。除此之外，您的
    键
    方法是错误的

    您应该做的是创建一个包含单个对象的数组：

    var newData = [{}];

data.forEach(function(d) {
    newData[0][d.Type] = d.Total
});
    并将堆栈生成器与此新阵列一起使用

    下面是以您的代码为基础并应用我提到的所有更改的演示。此外，我还为演示更改了SVG的高度和宽度：

    函数图（数据）{
//将csv中的所有字符串转换为整数值。
data.forEach（函数（d）{
d、 总计=+d.总计；
});
可变宽度=500，
高度=100；
var保证金={
前10名，
右:10,，
底数：30，
左：10
};
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，'100%”）
.attr（“高度”、“100%”）
.attr（'viewBox'，'0'+宽度+''+高度）
.append（'g'）；
宽度=宽度-边距.left-边距.right，
高度=高度-margin.top-margin.bottom；
attr（'transform'，'translate（'+margin.left+'，'+margin.top+'）；
//创建x和y比例。
var xScale=d3.scaleLinear（）
.范围（[0，宽度]）；
var yScale=d3.scaleBand（）
.范围（[0，高度]）
.填充（0.1）；
//创建域。
域（[0，d3.sum（数据，函数（d））{
返回d.总计；
})]);
//创建轴。
var x_axis=svg.append（'g'）
.attr（'类'，'轴'）
.attr（'填充'，1）
.attr（'transform'，'translate（'+0+'，'+height+'））
.call（d3.axisBottom（xScale）
.蜱虫（10，'s'）；
//使用slice方法选择要作为键的列。
var keys=data.map（函数（d）{
返回d.类型；
});
var newData=[{}]；
data.forEach（函数（d）{
新数据[0][d.Type]=d.总计
});
//使用键创建数据堆栈。
var stack=d3.stack（）
.钥匙（钥匙）；
//创建一系列数据。
var系列=堆栈（新数据）；
//使用colorbrewer创建颜色比例或传入颜色数组。
var colorScale=d3.scaleOrdinal（）
.domain（[0，12]）
.范围（d3.SchemeCategory 10）；
//附加矩形。
var bars=svg.selectAll（空）
.数据（系列）
.输入（）
.append（'g'）
.attr（'fill'，函数（d）{
返回色标（d键）；
})
.selectAll（'rect'）
.数据（功能（d）{
返回d；
})
.输入（）
.append（'rect'）