Javascript 带角度cli的D3 V4多折线图
我正在使用D3图表库使用Angular cli创建图表。D3版本是4.2.2。以下是我正在尝试的Javascript 带角度cli的D3 V4多折线图,javascript,d3.js,angular,charts,angular-cli,Javascript,D3.js,Angular,Charts,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 BarGraphDirect
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));
}
}
angular cli build.js
const map: any = {
'd3': 'vendor/d3/build'
};
/** User packages configuration. */
const packages: any = {
'd3':{
format: 'cjs',
defaultExtension: 'js',
main: 'd3.min.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)'
]
});
};
然后我的图表如下所示
图表仅显示销售数据,但我需要在图表中同时显示销售和搜索数据。i、 我只想创建多折线图
非常感谢您的任何建议
谢谢您没有画两条线,只有一条,请尝试以下方法:
// 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");
//格式化数据
data.forEach(函数(d){
d、 日期=解析日期(d.date);
//d、 销售额=+d.销售额//