Question

我的数据如下：

 var data = [{
    "Id": "1",
    "startTime": 1554750660000,
    "endTime": 1554751320000,
    "Alerts": [
      "Alert1","Alert2"
    ],
    "Apps": [
      "App1","App2"
    ]
  }]

我必须使用crossfilter-data-table显示以上数据。

当前，我可以显示如下数据：

StartTime        EndTime         Apps          Alerts
04/08/2019 12

12:42:00 PM      12:49:00 PM     App1,App2     Alert1,Alert2

相反，我想以以下格式显示它。

更改为：columns Apps, Alerts的数组值未显示为逗号分隔的值。相反，它们在另一行中显示在另一行中。

StartTime        EndTime         Apps          Alerts
04/08/2019 12

12:42:00 PM      12:49:00 PM     App1          Alert1
                                 App2          Alert2

我当前的代码如下：

import React from "react";
import * as dc from "dc";
import "dc/dc.css";
import * as d3 from "d3";
import { ChartTemplate } from "./chartTemplate";
import { css } from "glamor";

const tableFunc = (divRef, ndx) => {
    const summaryTable = dc.dataTable(divRef);
    const dimension = ndx.dimension(d => d.StartTime);

    summaryTable
        .dimension(dimension)
        .showGroups(true)
        .size(10000)
        .group(d => {
            return d.hour;
        })
        .columns([
            {
                label: "Start Time",
                format: function(d) {
                    return d. startTime;
                }
            },
            {
                label: "End Time",
                format: function(d) {
                    return d. endTime;
                }
            },
            {
                label: "Apps",
                format: function(d) {
                    return d.Apps;
                }
            },
            {
                label: "Alerts",
                format: function(d) {
                    return d.Alerts;
                }
            }
        ])
        .sortBy(function(d) {
            return d.startTime;
        })
        .order(d3.descending)
        .on("renderlet", function(table) {
            table.selectAll(".dc-table-group").classed("info", true);
        });

    return summaryTable;
};
const style = css({
    "& tr": {
        "&:hover": {
            background: "#dddd"
        }
    },
    "& td": {
        textAlign: "left",
        borderTop: "1px solid #ddd"
    }
});
export const DataTable = props => (
    <ChartTemplate
        chartFunction={tableFunc}
        styles={style}
        title="Summary"
    />
);

我该怎么做才能以上述所需格式显示详细信息。请帮助我真的是个新手，请使用crossfilter和d3。

Answer 1

假设可以在一个单元格中显示所有数组值，我认为最简单的方法就是使用<br> - the line break element格式化单元格。

例如

        {
            label: "Apps",
            format: function(d) {
                return d.Apps.join('<br>');
            }
        },

创建额外的行会更加困难，因为数据表行通常与数据集的行1：1对应。

添加链接

@ zubug55评论

在我的真实数据中，警报看起来像：

"Alerts": [ "abc@link1","def@link2" ]

如何中断abc@link1上的每个@并为abc链接到URL link1？

最可能同时生成HTML中的anchor elements，例如

            return d.Alerts.map(function(a) {
              var parts = a.split('@');
              return '<a href="' + parts[1] + '">' + parts[0] + '</a>';
            }).join('<br>');

需要在单独的行中显示交叉过滤器数据数组值，而不是在一行中显示逗号分隔的值

1 个答案:

添加链接