我正在尝试在angular2中的d3 v4中实现分组水平条形图。
我有一个小提琴链接,位于d3 v3 - https://jsfiddle.net/rafaveguim/6y9ptkw6/
我试图在d3 v4中实现它,数据是json格式。 这是stackblitz链接: - https://stackblitz.com/edit/angular-9xr14t?file=app%2Fapp.component.ts
但是,我陷入了错误。
请帮助实施分组水平条形图。
import { Component, OnInit } from '@angular/core';
declare var d3: any;
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
constructor() { }
ngOnInit() {
this.draw();
}
draw() {
var outerWidth = 500;
var outerHeight = 250;
var margin = {
left: 90,
top: 30,
right: 30,
bottom: 40
};
var barPadding = 0.2;
var yColumn = "Category";
var xColumn = "Orders";
var colorColumn = "Brand";
var layerColumn = colorColumn;
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")");
var yAxisG = g.append("g")
.attr("class", "y axis");
var colorLegendG = g.append("g")
.attr("class", "color-legend")
.attr("transform", "translate(235, 0)");
var xScale = d3.scaleLinear().range([0, innerWidth]);
var yScale = d3.scaleBand().rangeRound([0, innerHeight], barPadding);
var colorScale = d3.scaleOrdinal(d3.schemeCategory20c);
// var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
// .ticks(5)
// .tickFormat(d3.format("s"))
// .outerTickSize(0);
// var yAxis = d3.svg.axis().scale(yScale).orient("left")
// .outerTickSize(0);
//var colorLegend = d3.legend.color()
// .scale(colorScale)
// .shapePadding(2)
// .shapeWidth(15)
// .shapeHeight(15)
// .labelOffset(4);
function render(data) {
var nested = d3.nest()
.key(function(d) {
return d[layerColumn];
})
.entries(data);
var stack = d3.stack()
// .x(function(d) { return d[yColumn];})
.y(function(d) { return d["Orders"];})
.values(function(d) {return d.values;});
// .y(function(d) { return d[xColumn];})
// .values(function(d) {return d.values;});
var layers = stack(nested);
yScale.domain(layers[0].values.map(function(d) {
// return d[yColumn];
return d[" "];
}));
xScale.domain([
0,
d3.max(layers, function(layer) {
return d3.max(layer.values, function(d) {
return d.y;
});
})
]);
colorScale.domain(layers.map(function(layer) {
return layer.key;
}));
// var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
// .ticks(5)
// .tickFormat(d3.format("s"))
// .outerTickSize(0);
// var yAxis = d3.svg.axis().scale(yScale).orient("left")
// .outerTickSize(0);
xAxisG.call(d3.axisBottom(this.xScale).ticks(5));
yAxisG.call(d3.axisLeft(this.yScale)
.ticks(10, "s"));
// xAxisG.call(xAxis);
// yAxisG.call(yAxis);
var layers = g.selectAll(".layer").data(layers);
layers.enter().append("g").attr("class", "layer");
layers.exit().remove();
layers.style("fill", function(d) {
return colorScale(d.key);
});
var bars = layers.selectAll("rect").data(function(d) {
return d.values;
});
var barWidth = yScale.scaleBand() / colorScale.domain().length;
bars.enter().append("rect")
bars.exit().remove();
bars
.attr("y", function(d, i, j) {
return yScale(d[yColumn]) + barWidth * j;
})
.attr("x", function(d) {
return xScale(d.x);
})
.attr("height", barWidth)
.attr("width", function(d) {
return xScale(d.y);
})
//colorLegendG.call(colorLegend);
}
function type(d) {
d.Orders = +d.Orders;
return d;
}
//console.log("yay");
var data = d3.json( "assets/test.json");
//console.log(d3.select("pre#datadata").text());
//console.log(data);
render(data);
//d3.csv("BrandByCategoryTop5.csv", type, render);
}
}