Javascript 给定d3中由1个文件馈送的1个图表+；想要在给定X文件数组的情况下绘制X图表+；d3

这是，我是在这个基础上建立起来的

这是绘制1个图表的主要代码。在这个例子中，我使用了一个带有2个文件的aray

//array with 2 files(the same) just for example
arr = ["https://dl.dropboxusercontent.com/u/49714666/data.tsv", "https://dl.dropboxusercontent.com/u/49714666/data.tsv"]

var svg = d3.select("body").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 + ")");

d3.tsv(arr[0], type, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) {
    return d.letter;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.frequency;
  })]);

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

  svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
      return x(d.letter);
    })
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
      return y(d.frequency);
    })
    .attr("height", function(d) {
      return height - y(d.frequency);
    });


  svg.selectAll(".barText")
    .data(data)
    .enter().append("text")
    .attr("class", "barText")
    .attr("x", function(d) {
      return x(d.letter);
    })
    .attr("y", function(d) {
      return y(d.frequency);
    })
    .text(function(d) {
      return d.frequency;
    });

});

现在，如果我想添加第二个图表，我必须添加以下代码，这是可行的。注意，我必须声明一个新的svg

svg2

，然后将其附加到这个svg。 编辑查看小提琴

现在这不是一个很好的实践，因为我正在重写很多相同的代码。 但我希望能够绘制X图表，给出文件名的X元素数组。这些文件将具有相同的格式

有谁能给我指点正确的方向，告诉我怎么做吗？

我努力想找到一个解决办法，但没有成功。

---

我想使用for循环，但我认为d3.tsv函数是我的问题，因为它正在等待文件的数据，回调？

添加到for循环是最好的方法。您需要做的是将append svg调用移动到循环中：

var margin={top:20，right:20，bottom:30，left:40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.勾号（10，“%”）；
var arr=[”https://dl.dropboxusercontent.com/u/49714666/data.tsv","https://dl.dropboxusercontent.com/u/49714666/data.tsv"]
对于（arr中的此_文件）{
d3.tsv（arr[this_file]，类型，函数（错误，数据）{
如果（错误）抛出错误；
x、 域（data.map（函数（d）{返回d.letter；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.frequency；}）]；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{返回x（d字母）；}）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（d.frequency）；}）
.attr（“高度”，函数（d）{返回高度-y（d.frequency）；}）；
svg.selectAll（“.barText”）
.数据（数据）
.enter（）.append（“文本”）
.attr（“类”、“barText”）
.attr（“x”，函数（d）{返回x（d字母）；}）
.attr（“y”，函数（d）{返回y（d.frequency）；}）
.text（函数（d）{返回d.frequency；}）；
});
}
功能类型（d）{
d、 频率=+d.频率；
返回d；
}

.bar{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}

---

添加到for循环中是最好的方法。您需要做的是将append svg调用移动到循环中：

var margin={top:20，right:20，bottom:30，left:40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.勾号（10，“%”）；
var arr=[”https://dl.dropboxusercontent.com/u/49714666/data.tsv","https://dl.dropboxusercontent.com/u/49714666/data.tsv"]
对于（arr中的此_文件）{
d3.tsv（arr[this_file]，类型，函数（错误，数据）{
如果（错误）抛出错误；
x、 域（data.map（函数（d）{返回d.letter；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.frequency；}）]；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{返回x（d字母）；}）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（d.frequency）；}）
.attr（“高度”，函数（d）{返回高度-y（d.frequency）；}）；
svg.selectAll（“.barText”）
.数据（数据）
.enter（）.append（“文本”）
.attr（“类”、“barText”）
.attr（“x”，函数（d）{返回x（d字母）；}）
.attr（“y”，函数（d）{返回y（d.frequency）；}）
.text（函数（d）{返回d.frequency；}）；
});
}
功能类型（d）{
d、 频率=+d.频率；
返回d；
}

.bar{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}

---

使用为tsv文件提供的API，您可以使用以下内容：

d3.tsv(url[, accessor][, callback])

无存取器功能：

endpoints.forEach(function(endpoint, index) {
    d3.tsv(endpoint, renderChart);
});

使用可选访问器：

endpoints.forEach(function(endpoint, index) {
  d3.tsv(endpoint, type, renderChart);
});

雷乌斯

endpoints.forEach(function(endpoint, index) {
  d3.tsv(endpoint, type, renderChart);
});

function renderChart(error, data) {
   var svg = d3.select("body").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 + ")");
  // ..... rest of the code

}