0

下面是代码的重要部分：

<!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");

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

但是现在我遇到了一个需要两个单独的标题的问题，我打算以这种格式将它们直接插入 CSV：

  • 顶部标题（10 个元素）
  • 左标题（10 个元素）
  • 数据（10 x 10 矩阵）

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

4

1 回答 1

0

您可以将数组的第二个元素分配给新的标签变量并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);
于 2013-04-26T18:09:48.263 回答