trouble with d3 code complete

Avatar
Permanently deleted user
Created

I've set up d3 (v4) in PyCharm configuration help (https://www.jetbrains.com/help/pycharm/2016.3/configuring-javascript-libraries.html).  However, I'm not getting code completion. After searching help and even looking at WebStorm help (since they are parallel products with similar features), I'm stuck. I'd be grateful for any ideas.


Votes

0

Share

3 comments
Avatar
Elena Pogorelova
Created

How do you use it? Code snippets that show up the issue would be helpful

0
Avatar
Permanently deleted user
Created

I'm sorry for the slow response Elena!  

So if feels like the code completion is working okay. It's having a little trouble, but I think what I'm seeing is a problem with the linter / highlighter and that was throwing me off.  

 

Here's both a code example (as short as I could come up with to easily illustrate the problem).  And a couple of screenshots that illustrate what I mean.

Example 1: The following code snippet should run fine for you.  At row 56, the linter shows "Unresolved function or method data()".

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>Sunburst</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<style>
    path {
        stroke: white;
        fill: #05668D;
        opacity: 0.6;
        stroke-width: 2px;
    }
</style>

<svg>
    <g></g>
</svg>

<script>
    var vWidth = 300;
    var vHeight = 200;
    var myData = {
        "name": "Rooooot",
        "children": [{
            "name": "Topic X",
            "children": [{"name": "Sub X1", "size": 300}]
        }, {
            "name": "Topic Y",
            "children": [{"name": "Sub Y1", "size": 200}, {"name": "Sub Y2", "size": 200}]
        }, {
            "name": "Topic Z",
            "size": 400
        }]
    };

    // physical space setup
    var g = d3.select('svg').attr('width', vWidth).attr('height', vHeight)
        .select('g');

    // d3 setup
    var partitionLayout = d3.partition().size([2 * Math.PI, Math.min(vWidth, vHeight) / 2]);
    var root = d3.hierarchy(myData).sum(function (d) { return d.size; });
    var nodes = root.descendants();
    partitionLayout(root);

    // d3 draw
    var arc = d3.arc()
        .startAngle(function (d) { return d.x0; })
        .endAngle(function (d) { return d.x1; })
        .innerRadius(function (d) { return d.y0; })
        .outerRadius(function (d) { return d.y1; });

    g.attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')')
        .selectAll('path').data(nodes).enter().append('path')
        .attr("d", arc);
</script>


 

Example 2: Notice rows 50/51 the methods are white while rows 52/52 are blue.  I'm using the Darcula theme, so I think all 4 should be blue ("Instance Member Variables").  In similar code, the lint analysis won't recognize d.x0, d.x1, .size(), etc. -- I'm happy to provide a few more examples.  Just trying to keep it simple. 

Thanks for your help,

David

0
Avatar
Elena Pogorelova
Created

Can't recreate in 2017.2 using provided example - all methods are properly resolved and colored:

 

I'm using d3.v4.js downloaded from http://d3js.org/d3.v4.js

 


0

Please sign in to leave a comment.