我在正确执行javascript库(尤其是d3fc-sample)时遇到问题。我发现这是一种数据缩减算法,可减轻可视化大型数据集的负担。这是存储库:
https://github.com/d3fc/d3fc-sample
我遵循了github的说明。这是我所做的:
下载了node.js
node.js命令提示符:cd local_host_directory
node.js命令提示符:npm install d3fc-sample -g
试图导入我的d3脚本
但是,当我尝试在浏览器中运行页面时,此方法不起作用。开发人员工具给我一个错误,提示“ fc-sample未定义”。因此,我断言npm方法行不通。之后,我还尝试使用如下标记:<script>src=file_path.largestTriangleThreeBucket.js</script>
。那也没有改变任何东西。我对node.js知之甚少,我怀疑自己做错了什么。如果您有任何提示,请下一行。也欢迎不涉及node.js的库导入解决方案。
您可以在此处看到我的index.html:https://gist.github.com/diggetybo/f46ebec18dda16bf39f41b9282b5b593
或下面的js脚本:
<script>
var width = 600,
height = 400;
var margins = {
top: 10,
left: 50,
right: 50,
bottom: 10,
between: 50
};
var bottomGraphHeight = 50;
var topGraphHeight = height - (margins.top + margins.bottom + margins.between + bottomGraphHeight);
var graphWidths = width - margins.left - margins.right;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
.style('font', '10px sans-serif');
svg.append('defs')
.append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('width', width)
.attr('height', height);
var focus = svg
.append('g')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
var context = svg.append('g')
.attr('class', 'context')
.attr('transform', 'translate(' + margins.left + ',' +
(margins.top + topGraphHeight + margins.between) + ')');
var xScaleTop = d3.scale.linear().range([0, graphWidths]),
xScaleBottom = d3.scale.linear().range([0, graphWidths]),
yScaleTop = d3.scale.linear().range([topGraphHeight, 0]),
yScaleBottom = d3.scale.linear().range([bottomGraphHeight, 0]);
var xAxisTop = d3.svg.axis().scale(xScaleTop).orient('bottom'),
xAxisBottom = d3.svg.axis().scale(xScaleBottom).orient('bottom');
var yAxisTop = d3.svg.axis().scale(yScaleTop).orient('left');
var lineTop = d3.svg.line()
.x(function(d, i) {
return xScaleTop(i);
})
.y(function(d) {
return yScaleTop(d.y2);
});
var lineBottom = d3.svg.line()
.x(function(d, i) {
return xScaleBottom(i);
})
.y(function(d) {
return yScaleBottom(d.y2);
});
var brush = d3.svg.brush()
.x(xScaleBottom)
.on('brush', function brushed() {
xScaleTop.domain(brush.empty() ? xScaleBottom.domain() : brush.extent());
focus.select('.line').attr('d', lineTop);
focus.select('.x.axis').call(xAxisTop);
});
var url = "https://gist.githubusercontent.com/diggetybo/f46ebec18dda16bf39f41b9282b5b593/raw/70c279b9aef16f5348bc3185909c4b001414a611/wav_2.tsv";
d3.tsv(url, function(error, rawData) {
var data = rawData.map(function(d) {
return {
y2: +d.wav1
}
});
var sampler = fc_sample.largestTriangleThreeBucket();
sampler.x(function (d,i) { return i; })
.y(function (d) { return y2; });
sampler.bucketSize(10);
var sampledData = sampler(data);
xScaleTop.domain(d3.extent(data, function(d, i) {
return i;
}));
yScaleTop.domain([-.02, .02]);
xScaleBottom.domain(d3.extent(data, function(d, i) {
return i;
}));
yScaleBottom.domain([-.02, .02]);
var topXAxisNodes = focus.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(' + 0 + ',' + (margins.top + topGraphHeight) + ')')
.call(xAxisTop);
styleAxisNodes(topXAxisNodes, 0);
focus.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', lineTop);
var topYAxisNodes = focus.append('g')
.call(yAxisTop);
styleAxisNodes(topYAxisNodes);
context.append('path')
.datum(sampledData)
.attr('class', 'line')
.attr('d', lineBottom);
var bottomXAxisNodes = context.append('g')
.attr('transform', 'translate(0,' + bottomGraphHeight + ')')
.call(xAxisBottom);
styleAxisNodes(bottomXAxisNodes, 0);
context.append('g')
.attr('class', 'x brush')
.call(brush)
.selectAll('rect')
.attr('y', -6)
.attr('height', bottomGraphHeight + 7);
context.selectAll('.extent')
.attr({
stroke: '#000',
'fill-opacity': 0.125,
'shape-rendering': 'crispEdges'
});
styleLines(svg);
});
function styleLines(svg) {
svg.selectAll('path.line')
.attr({
fill: 'none',
'stroke-width': 1.5,
stroke: 'steelblue',
'clip-path': 'url(#clip)'
});
}
function styleAxisNodes(axisNodes, strokeWidth) {
axisNodes.selectAll('.domain')
.attr({
fill: 'none',
'stroke-width': strokeWidth,
stroke: 'black'
});
axisNodes.selectAll('.tick line')
.attr({
fill: 'none',
'stroke-width': 1,
stroke: 'black'
});
}
</script>
最佳答案
您正在尝试使用一个ES6模块的JavaScript文件。这些不能直接加载到浏览器中,相反,您应该使用“捆绑”版本的代码。
最简单的方法是通过顶级d3fc捆绑包,如此处所述:https://d3fc.io/introduction/getting-started.html