[英]D3 V4 multi-line chart with Angular-cli
我正在使用D3图表库通过Angular-cli创建图表。 D3版本是4.2.2 。 以下是我正在尝试的。
import {Directive, ElementRef} from '@angular/core';
import * as D3 from 'd3';
@Directive({
selector: 'bar-graph',
properties: ['data'],
})
export class BarGraphDirective {
private data:Array<number>; // raw chart data
private htmlElement:HTMLElement;
constructor(elementRef:ElementRef) {
this.htmlElement = elementRef.nativeElement; // reference to <bar-graph> element from the main template
console.log(this.htmlElement);
console.log(D3);
let d3:any = D3;
var data = [{
"date": "2011-10-01",
"sales": 110,
"searches": 172
}, {
"date": "2011-10-02",
"sales": 51,
"searches": 67
}, {
"date": "2011-10-03",
"sales": 53,
"searches": 69.4
}];
// set the dimensions and margins of the graph
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// parse the date / time
var parseDate = d3.timeParse("%Y-%m-%d");
console.log(parseDate);
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var line = d3.line().curve(d3.curveBasis)
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.sales);
});
var svg = d3.select(this.htmlElement).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 + ")");
var color = d3.scaleOrdinal(d3.schemeCategory10);
// format the data
data.forEach(function (d) {
d.date = parseDate(d.date);
d.sales = +d.sales;
});
x.domain(d3.extent(data, function (d) {
return d.date;
}));
y.domain([0, d3.max(data, function (d) {
return d.sales;
})]);
// Add the line path.
svg.append("path")
.data([data])
.attr("class", "line")
.style("fill", "none")
.attr("d", line)
.style("stroke", function (d) {
return color(d.Austin);
});
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
}
}
node_modules文件夹具有以下D3库。
和system.config.ts
const map: any = {
'd3': 'vendor/d3/build'
};
/** User packages configuration. */
const packages: any = {
'd3':{
format: 'cjs',
defaultExtension: 'js',
main: 'd3.min.js'
}
};
角-CLI-build.js
// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
...
'd3/**/*.+(js|js.map)'
]
});
};
然后我的图表如下所示。
该图表仅显示销售数据,但我需要在图表中同时显示销售和搜索数据。 即我只想创建多线图。
任何建议都将受到高度赞赏。
谢谢
您不会画两条线,而只是画一条,请尝试如下操作:
// format the data
data.forEach(function (d) {
d.date = parseDate(d.date);
//d.sales = +d.sales; //<-- you don't really need this, these are already numeric
});
x.domain(d3.extent(data, function (d) {
return d.date;
}));
y.domain([0, d3.max(data, function (d) {
return d.sales > d.searches ? d.sales : d.searches;
})]);
// Add the line path.
svg.append("path")
.attr("class", "line")
.style("fill", "none")
.attr("d", line(data))
.style("stroke", "orange");
// d.Austin? doesn't exist in your data
//function (d) {
// return color(d.Austin);
// });
// change line to look at searches
line.y(function (d) {
return y(d.searches);
});
// Add the second line path.
svg.append("path")
.attr("class", "line")
.style("fill", "none")
.attr("d", line(data))
.style("stroke", "steelblue");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.