CODEWITHSUNDEEP
d3.js
jonalv
jonalv

Reputation: 6116

Can't seem to get anything to happen in D3.js. How do I debug?

I am just starting out with D3. I have looked at the tutorials and now I am trying one my own. Trying to get some coloured div tags based on my data structure. Nothing at all happens and I need some help in how to debug this:

HTML:

<div class="chart"></div>
<script src="https://d3js.org/d3.v3.min.js"  charset="utf-8"></script>

CSS:

.chart div {
        font: 10px sans-serif;
        background-color: white;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: gray;
        width: 15px;
        height: 15px;
    }

JavaScript:

var threshold = 0.5
        var data = []
        data[0] = JSON.parse('{ "smiles": "CCCCC=O", "prediction": [ { "pValue": 0, "label": "bar" }, { "pValue": 0.7, "label": "foo" } ] }')
        data[1] = JSON.parse('{ "smiles": "CCCCC=O", "prediction": [ { "pValue": 0.3, "label": "bar" }, { "pValue": 0.6, "label": "foo" } ] }')
        data[2] = JSON.parse('{ "smiles": "CCCCC=O", "prediction": [ { "pValue": 0.4, "label": "bar" }, { "pValue": 0.4, "label": "foo" } ] }')
        data[3] = JSON.parse('{ "smiles": "CCCCC=O", "prediction": [ { "pValue": 0.5, "label": "bar" }, { "pValue": 0.3, "label": "foo" } ] }')
        data[4] = JSON.parse('{ "smiles": "CCCCC=O", "prediction": [ { "pValue": 0.6, "label": "bar" }, { "pValue": 0.2, "label": "foo" } ] }')

        d3.select(".chart")
            .selectAll("div")
              .data(data)
            .enter().append("div")
            .style("background-color", function(d) {

                if (d['prediction'][0]['pValue'] > threshold &&
                    d['prediction'][1]['pValue'] > threshold) {
                        "green"
                    }
                if (d['prediction'][0]['pValue'] > threshold ) {
                        "blue"
                }
                if (d['prediction'][1]['pValue'] > threshold ) {
                        "yellow"
                }
            })

JSFiddle

Upvotes: 0

Views: 348

Answers (1)

pmkro
pmkro

Reputation: 2550

In your function to colour the divs you don't have any returns. Fiddle. I added return color in your if statement and it works now!

           if (d['prediction'][0]['pValue'] > threshold &&
                d['prediction'][1]['pValue'] > threshold) {
                    return "green"
                }
            if (d['prediction'][0]['pValue'] > threshold ) {
                    return "blue"
            }
            if (d['prediction'][1]['pValue'] > threshold ) {
                    return "yellow"
            }

Upvotes: 1

Related Questions