0
我使用D3制图库来创建带Angular-cli的图表。 D3版本是4.2.2。以下是我正在尝试的。D3 V4与Angular-cli
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));
}
}
然后我的图表如下图所示。
的问题是X轴& Y轴名丢失,X轴标签(日期)的格式不正确。
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)'
]
});
};
任何建议都高度赞赏。
谢谢
只要改变你的CSS:'{路径填写:无;}'。或者直接在你的代码中使用'.attr(“fill”,“none”)'。 –
谢谢,它的工作原理。为什么X轴标签格式不正确。它显示标签,如“06 AM 12 PM” – Rose18
欢迎来到'd3.timeScale()'......现在认真考虑,如果您有*不同的问题,请发布*不同的问题。 –