Javascript 如何在d3无序列表中添加多个图表

我正在尝试将React.js图表添加到使用d3创建的无序列表中

我正在传递一个数据点列表，对于其中的每一个数据点，我希望触发调用，以添加并显示一个新图表，作为无序列表的一部分。现在，我能做的最好的事情就是显示一个图表（尽管下面的代码会导致错误）。我希望它显示多个图表，尽管在本例中，下面的图表都是相同的。（解决此问题后的下一步是获取不同的图表。）

下面的代码首先调用display_charts函数，清除所有现有无序列表，然后为数据集中的每个点添加列表项

如何更改此设置以正确显示多个图表

提前谢谢

function display_chart(_err, _responseObjectFromRequestCall) {
    var targetElement = document.getElementById('chart');
    try {
        var responseText = _responseObjectFromRequestCall.responseText
        responseText = responseText.replace("dataSource", "//rrag.github.io/react-stockcharts/data/MSFT.tsv")
        var transformedResponse = Babel.transform(responseText, { presets: ["es2015", "react", "stage-3"] }).code;
        eval(transformedResponse)
        ;
    } catch (error) {
        targetElement.innerHTML = 'ERROR: ' + error.message
        ;
    }        
}

function display_charts(_data) {

    node_notes.selectAll("ul").remove() // remove any existing list
    var list = node_notes.append("ul")
        // .selectAll("ul") // add a new unordered list
        // .data( _data)
        // .enter()
        // .append("ul")
        ;

    var listItems = list
        .selectAll("li") // select all list items
        .data( _data, function(_datum) {
            d3.request("chart.jsx").get(display_stock_chart)
            ;
        })
        .enter()
        .append("li") // select add a list item

}

---

为什么要使用巴贝尔变换？你能做点像这样的事情吗？谢谢你的回复。我不想说，我真的不明白这个问题。你们的图书馆使用的是react，我正在学习，你们的例子也使用了Babel，我也在学习。看起来我很想按照你的建议去做，但我不知道该如何理解这可能会让人不知所措，最好创建一些不同的组件，比如

Chart1.js

，

Chart2.js

。。。每一个都会导出一个非常简单的react组件，例如

导出默认函数Chart1（）{return}

，然后将这两个组件导入另一个.js文件。一旦你的部件正常工作，你就可以修改

Chart1.js

来添加你的图表。我建议在进入react股票图表之前花些时间创建一个更简单的react应用程序