将自定义轴名称添加到 Javascript D3 平行坐标（CSV 没有标题行）答案

【问题标题】：Adding custom axis names to Javascript D3 Parallel Coordinates (CSV has no header line)将自定义轴名称添加到 Javascript D3 平行坐标（CSV 没有标题行）
【发布时间】：2017-08-11 21:48:59
【问题描述】：

我正在使用 D3 加载一个 csv 文件，该文件在设计上没有标题行。数据如下所示：

11,12,16,32,12

63,21,34,74,23

我已经设法加载数据并使用 D3 平行坐标模块 (syntagmatic.github.io/parallel-coordinates) 绘制它。但是，在绘制轴名称时默认为 0、1、2、3、4。我正在尝试将这些自定义标签更改为从包含标签名称的 additional 文件中读取的标签。我无法控制数据结构。

下面的代码显示了我的两个函数。第一个将数据从 csv 文件路径转换为可绘图格式。第二个是该数据的实际绘图。为了指定自定义轴标签，我应该改变什么吗？

// This function takes a file path and loads the data into a variable, then calls plot_data
    function load_file(file) {

        // removes previous SVG plots to prevent messy overlays and memory chaos
        d3.selectAll("svg").remove();

        // This code takes the file (which is a path, and puts it into var data, which is then given to the parcoords plot function)
        d3.text(file, function(text) {
            var data = d3.csv.parseRows(text).map(function(row) {
                return row.map(function(value) {
                    return +value;

                });
            });


// This function plots the data given to it.
    function plot_data(data) {

        pc1 = d3.parcoords()("#example")
                // This is how we get colour working. put a function in the parameters it iterates over each data item .color()
                .data(data)
                .render()
                .alpha(0.35)
                .brushMode("1D-axes")
                .interactive()  // command line mode


        pc1.reorderable();
        console.log("The plot should be done now")
    };

【问题讨论】：

您正在使用另一个库，可能是这个：syntagmatic.github.io/parallel-coordinates。如果正确，请在您的问题中添加此信息，否则任何人都很难帮助您。
提到了。 “我已经设法加载数据并使用 D3 平行坐标模块对其进行绘图。”
是的，我读过它，但试图帮助您的人可能不知道这是什么模块。即使我不知道，我只是猜测它是我链接的那个。
啊，是的，很抱歉不够清晰。那是正确的模块，我会将它添加到我的帖子中。
请阅读How does accepting an answer work?。不要在问题中编辑“已解决”一词。

标签： javascript csv d3.js

【解决方案1】：

我已经设法解决了这个问题。

我使用的答案发布在：read csv/tsv with no header line in D3

我手动添加了标题。它们现在是硬编码的，但可以很容易地调整为从文件中读取，这就是我的目标。

function load_file(file) {

        // removes previous SVG plots to prevent messy overlays and memory chaos
        d3.selectAll("svg").remove();

        // This code takes the file (which is a path, and puts it into var data, which is then given to the parcoords plot function)
        d3.text(file, function(text) {

            /* The '6,7,8,9,0\n' is like adding a new line to the CSV file to act as the header
            */
            var result = "6,7,8,9,0\n" + text

            var data = d3.csv.parse(result)
            /*
            var data = d3.csv.parseRows(text).map(function(row) {
                return row.map(function(value) {
                    return +value;

                });
            });
            */

        console.log(data)
        plot_data(data)

【讨论】：