在d3.js中引用字典值时出错

时间:2019-07-27 21:09:14

标签: d3.js jupyter-notebook

我正在尝试通过引用字典来访问半径值以显示圆。当我将它们表示为字典时,当我的包出现在数组中时,我已经可以做到这一点,即使出现d.keyName似乎是推荐的方式,我也会收到语法错误。

有效的代码部分

%%javascript
require.config({
    paths: {
        d3: 'https://d3js.org/d3.v5.min'
    }
});

(function(element) {
    require(['d3'], function(d3) {   
        var data = [4, 8, 4]
        var svg = d3.select(element.get(0)).append('svg')
            .attr('width', 400)
            .attr('height', 200);

        svg.selectAll('circle')
            .data(data)
            .enter()
            .append('circle')
            .style('fill', 'orange')
            .attr("r", function(d) {return 2*d;})
            .attr("cx", function(d, i) {return 30 * (i + 1);})
            .attr("cy", function(d, i) {return 100 + 30 * (i % 3 - 1);})

        ;
    })
})(element);

这是行不通的:

%%javascript
require.config({
    paths: {
        d3: 'https://d3js.org/d3.v5.min'
    }
});


(function(element) {
    require(['d3'], function(d3) {   
        //var data = [4, 8, 4]
        //var words = ["milk", "but", "hey"]
        var data = [{'num': 4, 'word': 'milk'}, {'num': 8, 'word': 'but'}, {'num': 4, 'word': 'hey'}];

        var svg = d3.select(element.get(0)).append('svg')
            .attr('width', 400)
            .attr('height', 200);

        svg.selectAll('circle')
            .data(data)
            .enter()
            .append('circle')
            .style('fill', 'orange')
            .attr("r", function(d.num) {return 2*d.num; })
            .attr("cx", function(d.num, i) {return 30 * (i + 1); })
            .attr("cy", function(d.num, i) {return 100 + 30 * (i % 3 - 1); })
            //.attr("r", function(d) {return 2*d;})
            //.attr("cx", function(d, i) {return 30 * (i + 1);})
            //.attr("cy", function(d, i) {return 100 + 30 * (i % 3 - 1);})



        ;
    })
})(element);

添加输出时出现Javascript错误! SyntaxError:意外令牌。 有关更多详细信息,请参见浏览器Javascript控制台。

2outputarea.js:764 SyntaxError: Unexpected token .
    at OutputArea.append_javascript (outputarea.js:762)
    at OutputArea.append_mime_type (outputarea.js:696)
    at OutputArea.append_display_data (outputarea.js:659)
    at OutputArea.append_output (outputarea.js:346)
    at OutputArea.handle_output (outputarea.js:257)
    at output (codecell.js:395)
    at Kernel._handle_output_message (kernel.js:1196)
    at i (jquery.min.js:2)
    at Kernel._handle_iopub_message (kernel.js:1223)
    at Kernel._finish_ws_message (kernel.js:1015)

1 个答案:

答案 0 :(得分:0)

语法错误。因为您要将$sql = "INSERT INTO RideMatch.CGprgm_reg (user_id, participate, reason, other, program, primary, cpp1name, notcg1, cpp2name, cpp2cginit, notcg2, cpp3name, cpp3cginit, notcg3, cpp4name, cpp4cginit, notcg4, cpp1cginit, vanpool_name, child_name, child_bd, cc_facility, transit_typ, ml_orig, ml_dest, pass_type, CGagree, available, modified, dynamicFieldsVal, cancelReason, otherReason) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"; $stmt = mysqli_stmt_init($conn); if(!mysqli_stmt_prepare($stmt, $sql)){ error_log("SQL statement failure CGprgm_reg 2", 0); echo "ERROR: " . $stmt->error."<br>"; } 作为参数传递给属性回调 object.property

使用function(d.num) {return 2*d.num; }

function(d) {return 2*d.num; }是您当前数组(或数据[i])中的数据

检查此information以及d3 selection的工作方式