javascript - 在没有 svg 的 React 中使用 D3 来处理表格行无法渲染

问题描述

我正在寻找一个当前工作的 d3 表，并将该表实现为一个反应组件。几乎所有的 D3 示例都使用 svg，而我没有使用这个标签。

我能够将 JSON 数据输出到控制台，但它没有附加行。

这是我原来的 D3.html 页面。

var column_names = ["Select","Deploy ID", "Requestor", "Market", "Env","Group","Deploy Date", "Approver", "Completed Date", "CRQ", "Job Status"];


// draw the table
d3.select("body").append("div")
    .attr("id", "container")

d3.select("#container").append("div")
    .attr("id", "FilterableTable");


var table = d3.select("#FilterableTable").append("table");
table.append("thead").append("tr");





var headers = table.select("tr").selectAll("th")
    .data(column_names)
    .enter()
    .append("th")
    .text(function(d) { return d; });

var filterButton = d3.select("#filterButton");


var rows;

d3.json("data.json", function(data) { // loading data from server

    // draw table body with rows
    table.append("tbody")

    // data bind
    rows = table.select("tbody").selectAll("tr")
        .data(data, function(d){ return d.deploy_id; });

    // enter the rows
    rows.enter()
        .append("tr")
        .append("td") .append("input") .attr("type", "checkbox")

    // enter td's in each row
    row_entries = rows.selectAll("td")

        .data(function(d) {
            var arr = [];
            for (var k in d) {
                if (d.hasOwnProperty(k)) {
                    arr.push(d[k]);
                }
            }
            return [arr[0],arr[0],arr[11],arr[9],arr[7],arr[5],arr[4],arr[1],arr[2],arr[3],arr[8]];

        })


        .enter()
        .append("td")


    row_entries.text(function(d) { return d; })

 });

这是我对 D3 的了解和反应，我已经更改了 d3.json 方法，并且我可以通过将 data.json 保存在 /public 文件夹中来获取要记录的 data.json 值，但是我无法使用 data.json 中的值构建行

import React, { Component} from 'react';
import * as d3 from "d3";

class ViewDeploys extends Component {
constructor(props) {
    super(props);
}

componentDidMount() {
    this.drawTable();
}

drawTable() {

    var column_names = ["Select","Deploy ID", "Requestor", "Market", "Env","Group","Deploy Date", "Approver", "Completed Date", "CRQ", "Job Status"];


    // draw the table
    d3.select("body").append("div")
        .attr("id", "container")

    d3.select("#container").append("div")
        .attr("id", "FilterableTable");


    var table = d3.select("#FilterableTable").append("table");
    table.append("thead").append("tr");





    var headers = table.select("tr").selectAll("th")
        .data(column_names)
        .enter()
        .append("th")
        .text(function(d) { return d; });

    var filterButton = d3.select("#filterButton");


    var rows;

   // d3.json("/data.json", function(data) { // loading data from server
        d3.json("/data.json").then((data) => {
            // draw table body with rows
        table.append("tbody")

        // data bind
        rows = table.select("tbody").selectAll("tr")
            .data(data, function(d){ return d.deploy_id; });

        // enter the rows
        rows.enter()
            .append("tr")
            .append("td") .append("input") .attr("type", "checkbox")

        // enter td's in each row
        var row_entries = rows.selectAll("td")

            .data(function(d) {
                var arr = [];
                for (var k in d) {
                    if (d.hasOwnProperty(k)) {
                        arr.push(d[k]);
                    }
                }
                return [arr[0],arr[0],arr[11],arr[9],arr[7],arr[5],arr[4],arr[1],arr[2],arr[3],arr[8]];

            })


            .enter()
            .append("td")


        row_entries.text(function(d) { return d; })

    });





}


render() {
    const id = '1';
    return (
        <section className="viewDeploysContainer">
            <svg id={id} />
        </section>
    );
}
}

export default ViewDeploys;

标签： javascriptreactjsd3.js

javascript - 在没有 svg 的 React 中使用 D3 来处理表格行无法渲染

问题描述

解决方案

推荐阅读