我'我试图通过使用codemmirror编辑器构建D3.js，但我在那里输入的任何东西都不能被D3.js正确地可

I'm trying to build D3.js by using CodeMirror editor, but anything I input in there can't be properly visualized by D3.js. What am I missing?

本文关键字：js D3 在那里 输入 任何东 正确地 都不能 构建 codemmirror 编辑器      更新时间：2023-09-26

我是D3.js和CodeMirror的新手(以及StackOverflow，请原谅我的错误)，我想为我的最新项目尝试一些很酷的东西，所以这两个是我最好的选择，但我有一些问题。请帮助我注意到我做错了什么，什么是最好的解决方案，使这个程序工作。我很高兴我们有一个好的论坛。

所以，长话短说，我试图通过使用D3.js和codemmirror作为我的编辑器来构建一个可视化工具。例如，这就是我试图可视化的内容，但是我想从codemmirror编辑器输入数据，而不是读取morley.csv数据(硬编码)。这是我写给编辑的:

<textarea id="values"></textarea>
<script>
  var editor = CodeMirror.fromTextArea(values, {
    lineNumbers: true,
    matchBrackets: true,
    theme : '3024-day'
  });
</script>
<a id="gen" class="btn btn-primary btn-block" role="button">Generate Visualization</a>

可视化构建器:

<div class="row" id="chart">
  <script>
    d3.select("#gen").on("click", function(){
      d3.event.preventDefault(); 
      d3.select("#chart svg").remove();
      var dataset = editor.getValue();
      var margin = {top: 10, right: 50, bottom: 20, left: 50},
      width = 120 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
      var min = Infinity,
      max = -Infinity;
      var chart = d3.box()
      .whiskers(iqr(1.5))
      .width(width)
      .height(height);
      d3.csv(dataset, function(error, csv) {
        if (error) throw error;
        var data = [];
        csv.forEach(function(x) {
        var e = Math.floor(x.Expt - 1),
        r = Math.floor(x.Run - 1),
        s = Math.floor(x.Speed),
        d = data[e];
        if (!d) d = data[e] = [s];
        else d.push(s);
        if (s > max) max = s;
        if (s < min) min = s;
        });
        chart.domain([min, max]);
        var svg = d3.select("#chart").selectAll("svg")
        .data(data)
        .enter().append("svg")
        .attr("class", "box")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.bottom + margin.top)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(chart);
        setInterval(function() {
        svg.datum(randomize).call(chart.duration(1000));
        }, 2000); 
      });
      function randomize(d) {
        if (!d.randomizer) d.randomizer = randomizer(d);
        return d.map(d.randomizer);
      }
      function randomizer(d) {
        var k = d3.max(d) * .02;
        return function(d) {
        return Math.max(min, Math.min(max, d + k * (Math.random() - .5)));
        };
      }
      function iqr(k) {
        return function(d, i) {
          var q1 = d.quartiles[0],
          q3 = d.quartiles[2],
          iqr = (q3 - q1) * k,
          i = -1,
          j = d.length;
          while (d[++i] < q1 - iqr);
          while (d[--j] > q3 + iqr);
          return [i, j];
        };
      }
    });
  </script>
</div>

让我们假设我使用相同的morley.csv作为我的输入数据。

不知怎么的，它没有像我计划的那样工作。我不明白我在这里错过了什么，但我最好的猜测一定与d3.csv如何不能解析我从textarea values的输入有关。输出div chart总是show nothing.

谢谢你的帮助，虽然我是新来的。

1。在新版本中将d3.csv()更改为d3.csv.parse()或d3.csvParse()。前者只接受文件名，后者接受CSV数据字符串。

调试并确保您的数据集变量确实是一个逗号分隔的字符串。

2。此外，如果你需要的只是一个平面数组，如[1,2,3]，我认为你需要把所有的代码从回调函数中删除，然后这样做:

data = d3.csv.parse(dataset);

然后继续使用现有的代码。

在csv中使用回调函数的原因。解析调用只是为了构造返回的数组;例如，如果你的数组元素是包含多个值的对象，你可以在回调函数中设置。

相关文章：