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

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

我应该做些什么来以所需的格式显示详细信息，因为 above.Please 帮助我真的是 React、crossfilter 和 d3 的新手。

Answer 1

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

格式化单元格

例如

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

创建额外的行会困难得多，因为数据 table 行通常对应 1:1 数据集的行。

添加链接

@zubug55 评论

In my real data, alerts look like:

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

How do I break each abc@link1 on @ and make abc a link to the 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>');

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

Need to display crossfilter data array values in separate lines instead of comma separated values in a single line

crossfilter

dc.js

添加链接