Question

我使用以下链接创建D3的漏斗图表： jakezatecky/d3-funnel

代码工作正常。现在，正如它在教程中所说，我希望块高度与它们的重量成正比，所以我需要改变D3 deafult：

D3Funnel.defaults.block.dynamicHeight = true;

但是当我将tihs行添加到我的代码中时，整个图表将会消失。

你能帮我找出问题吗？代码是：

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.rawgit.com/jakezatecky/d3-funnel/0.3.2/d3-funnel.js?1"></script>

<input class="btn btn-primary" type="submit" id="submit_btn" value="Create Chart">
<br><br>
<div id="funnelPanel">
    <div id="funnelContainer">
        <div id="funnel"></div>
    </div>
</div>

<script>
    var data = [
        ["Clicked", "5,000"],
        ["Joined", "2,500"],
        ["Shared", "50"]
    ];

    width = $('#funnelPanel').width();

    var options = {
        width: width - 300,
        height: 400,
        bottomPct: 1 / 4,
        dynamicHeight: true,
        fillType: "solid",   // Either "solid" or "gradient"
        hoverEffects: true  // Whether the funnel has effects on hover
    };

    D3Funnel.defaults.block.dynamicHeight = true;

    var funnel = new D3Funnel(data, options);
    funnel.draw("#funnelContainer");

    $(window).on("resize", function () {
        var width = $("#funnelPanel").width();
        options.width = width;
        var funnel = new D3Funnel(data, options);
        funnel.draw('#funnelContainer');
    });
    $('#submit_btn').on('click', function () {
        var changed_data = [
            ["clicked", "3000"],
            ["joined", "70"],
            ["shared", "10"]
        ];
        var funnel = new D3Funnel(changed_data, options);
        funnel.draw('#funnelContainer');
    });
</script>

Answer 1

您使用v2.3.0的d3-funnel，但它已经是v0.7.0。数据格式也随着漏斗类构造函数接口而改变。

TestNG] Running:
  C:\Users\Mohan Raj S\AppData\Local\Temp\testng-eclipse-1635948262\testng-customsuite.xml

element is visible [[FirefoxDriver: firefox on WINDOWS (6d5bc9d3-cdff-4831-991a-69d7d7ce3d36)] -> xpath: //a[contains(text(),'Gmail')]]
PASSED: methoda

===============================================
    Default test
    Tests run: 1, Failures: 0, Skips: 0
===============================================


===============================================
Default suite
Total tests run: 1, Failures: 0, Skips: 0
===============================================

Answer 2

Antal Baye是正确的，你使用的是过时的图书馆版本，但根据最新的文档，他的回答并不完全正确。您正在使用：

https://cdn.rawgit.com/jakezatecky/d3-funnel/0.3.2/d3-funnel.js

最新版本如下：

https://cdn.rawgit.com/jakezatecky/d3-funnel/v0.7.0/d3-funnel.js

根据最新文档，您将按以下方式构建页面：

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdn.rawgit.com/jakezatecky/d3-funnel/v0.7.0/dist/d3-funnel.js"></script>

<input class="btn btn-primary" type="submit" id="submit_btn" value="Create Chart">
<br><br>
<div id="funnelPanel">
    <div id="funnelContainer">
        <div id="funnel"></div>
    </div>
</div>

<script>
    var data = [
        ["Clicked", 5000],
        ["Joined", 2500],
        ["Shared", 50],
    ];

    width = $('#funnelPanel').width();

    var options = {
        chart: {
            width: width - 300,
            height: 400,
            bottomWidth: 1 / 4,
        },
        block: {
            dynamicHeight: true,
            fillType: "solid",
            hoverEffects: true,
        },
    };

    var funnel = new D3Funnel("#funnelContainer");
    funnel.draw(data, options);

    $(window).on("resize", function() {
        var width = $("#funnelPanel").width();
        options.width = width;

        funnel.draw(data, options);
    });

    $('#submit_btn').on('click', function() {
        var changed_data = [
            ["clicked", 3000],
            ["joined", 70],
            ["shared", 10],
        ];

        funnel.draw(changed_data, options);
    });
</script>

请注意，某些元素包含在chart下，其他元素则包含在block下。此外，请注意，bottomPct前一段时间已重命名为bottomWidth。最后，请注意数据数组不包含值的引号;将根据label.format自动添加逗号。

请参阅下面的JSFiddle示例：

http://jsfiddle.net/z0Lr613v/2/

覆盖d3漏斗图表的默认值

2 个答案: