D3.js 和 browserify 的问题答案

【问题标题】：Trouble with D3.js and browserifyD3.js 和 browserify 的问题
【发布时间】：2017-09-18 16:27:10
【问题描述】：

我正在尝试将我的 javascript 代码与最新版本的 D3.js (4.10.2) 和 browserify 捆绑在一起，但它不起作用。错误出现在d3.json和d3.csv的请求函数中。无法加载文件，我收到以下错误：“位置 0 处 JSON 中的意外令牌 T”。我认为这是配置问题，因为没有 browserify 代码效果很好。我尝试了多种解决方案，例如https://github.com/vigetlabs/blendid/issues/17，但不幸的是没有成功。我真的很困惑！

gulpfile.js：

const babel = require('babelify');
const browserify = require('browserify');
const gulp = require('gulp');
const gutil = require('gulp-util');
const source = require('vinyl-source-stream');

gulp.task('browserify', function () {

  return browserify({
    entries: ['./src/js/index.js'],
    extensions: ['.js'],
    paths: ['./node_modules', './src/js/']
  })
    .transform(babel)
    .bundle()
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('index.js'))
    .pipe(gulp.dest('./dist/js/'));
});

gulp.task('default', ['browserify']);

文件结构：

/src
  /css
  /data
  /js
  index.html

文件加载：

d3.queue()
  .defer(d3.json, 'data/file1.json')
  .defer(d3.json, 'data/file2.json')
  .await((error, file1Result, file2Result) => { ... });

也许你们有一个想法！

【问题讨论】：

你能告诉我们加载 JSON 文件的代码行吗？可能是路径问题。不过，如果没有看到代码，就很难分辨。
谢谢，我更新了问题！
JSON 文件的内容是什么？您可以发布前几行（或重现问题的最小示例）吗？
“位置 0 处 JSON 中的意外标记 T”表明您的 JSON 文件之一的 JSON 格式不正确。但这只是一个猜测。
相信我，内容格式正确。 JSON文件没有问题。

标签： javascript d3.js ecmascript-6 gulp browserify

【解决方案1】：

这是我的问题的可能解决方案：https://github.com/d3/d3-request/issues/24#issuecomment-328945696

它对我有用，但它只是一个 hack！

我希望很快会有一个永久的解决方案。

【讨论】：