0

我在这里发布了我最初的问题（如何使用 D3 创建点阵图）： D3 Dot Matrix Chart

我收到了一个有用的答案，指引我去： https ://github.com/arpitnarechania/d3-dotmatrix

我相信我正确安装了 d3-dotmatrix。然而，当我尝试运行示例代码时，什么都没有生成，并且我在控制台中也没有收到任何错误消息。任何建议将不胜感激。我是 D3 的新手并且正在苦苦挣扎。谢谢你。

<!-- https://github.com/arpitnarechania/d3-dotmatrix -->
<!-- https://arpitnarechania.github.io/d3-dotmatrix/ -->

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dot Matrix Chart</title>

    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="DotMatrix.js"></script>


<style>
    body {
        font: 12px Arial;
    }

    path {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

    .tooltip {
        background: #eee;
        box-shadow: 0 0 5px #999999;
        color: #333;
        font-size: 12px;
        left: 130px;
        padding: 10px;
        position: absolute;
        text-align: center;
        top: 95px;
        z-index: 10;
        display: block;
        opacity: 0;
    }

    .title {
        font-size: 16px;
    }

    #DotMatrix {
        width: 800px;
        height: 800px;
    }
</style>

<div id="DotMatrix"></div>

<script>

    // data
    var dataset =
        [
            { group: "Group 1", category: "Category 1", count: 48 },
            { group: "Group 1", category: "Category 2", count: 27 },
            { group: "Group 1", category: "Category 3", count: 12 },
            { group: "Group 1", category: "Category 4", count: 16 },
            { group: "Group 2", category: "Category 1", count: 35 },
            { group: "Group 2", category: "Category 2", count: 12 },
            { group: "Group 2", category: "Category 3", count: 16 },
            { group: "Group 2", category: "Category 4", count: 42 },
            { group: "Group 3", category: "Category 1", count: 39 },
            { group: "Group 3", category: "Category 2", count: 25 },
            { group: "Group 3", category: "Category 3", count: 26 },
            { group: "Group 3", category: "Category 4", count: 46 },
        ];

    var chartOptions = {
        dot_radius: 10,
        no_of_circles_in_a_row: 10,
        dot_padding_left: 5,
        dot_padding_right: 5,
        dot_padding_top: 5,
        dot_padding_bottom: 5
    };
    DotMatrixChart(dataset, chartOptions);

</script>
4

0 回答 0