Question

以下是代码的重要部分：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="firstdoc.css">
        <meta charset="utf-8">
        <title>Multi-Class Test Error Visualization</title>
        <script src="http://d3js.org/d3.v3.js"></script>
        <style>
          text.title {
            font: 20px sans-serif;
            font-family: Calibri;
            shape-rendering: crispEdges;
          }
        </style>
    </head>
    <body>
        <script type="text/javascript">            
            w = 400;
            h = 400;
            barPadding = 1;
            top_gap = 100;
            left_gap = 50;
            var output_format = d3.format("d");

            // create svg given the height/width above
            var svg = d3.select("body")
            .append("svg")
            .attr("width", w + left_gap)
            .attr("height", h + top_gap);

            var labels = [];
            var labels2 = [];


            d3.text("d3_output.csv", function(error, fulldata) {
              labels = d3.csv.parseRows(fulldata);
              fulldata = d3.merge(labels);
              labels = labels[0];
              console.log(labels);


            n = labels.length;
            fulldata = fulldata.slice(n,fulldata.length);
            console.log(fulldata);
            svg.selectAll("top.headers")
               .data(labels)
               .enter()
               .append("text")
               .text(function(d) {
                    return d;
               })
               .attr("x", function(val, elem_num) {
                    return ((elem_num%n) * (w / n)) + (w/n)/2 - 2 + left_gap;
               })
               .attr("y", 90)
               .attr("font-family", "sans-serif")
               .attr("text-anchor", "middle")
               .attr("font-size", "11px")
               .attr("fill", "black");

            svg.selectAll("left.headers")
               .data(labels)
               .enter()
               .append("text")
               .text(function(d) {
                    return d;
               })
               .attr("x", 23)
               .attr("y", function(val, elem_num) {
                    return elem_num*(h/n) + (w/n)/2 + 2 + top_gap;})
               .attr("font-family", "sans-serif")
               .attr("text-anchor", "left")
               .attr("font-size", "11px")
               .attr("fill", "black");

此代码正确地从CSV文件创建一个11 x 10的热图，第一行包含标题。

但现在我遇到了一个需要两个单独标题的问题，我计划以这种格式直接插入CSV：

热门标题（10个元素）
左标题（10个元素）
数据（10 x 10矩阵）

我创建了var labels2 = [];存储左侧标题，但我无法弄清楚代码中还有哪些更改。

Answer 1

您可以将数组的第二个元素指定给新标签变量并相应地剪切fulldata。

temp = d3.csv.parseRows(fulldata);
fulldata = d3.merge(temp);
labels = temp[0];
labels2 = temp[1];
fulldata = fulldata.slice(labels.length + labels2.length, fulldata.length);

从同一个csv文件中读取两个单独的头文件（d3）

1 个答案: