似乎无法在D3.js中发生任何事情。我该如何调试?

时间:2018-03-13 17:50:01

标签: d3.js

我刚刚开始使用D3。我看过教程,现在我正在尝试自己的教程。试图根据我的数据结构获得一些彩色div标签。什么都没发生,我需要一些帮助来解决这个问题:

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

1 个答案:

答案 0 :(得分:1)

在为div设置颜色的功能中,你没有任何回报。 Fiddle。我在你的if语句中添加了 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" } ,现在可以正常使用了!

param($installPath, $toolsPath, $package, $project)

# Determine fully qualified path to a temp file
$fileName = [System.IO.Path]::GetTempPath() + [System.Guid]::NewGuid().ToString() + ".vssettings"; 

# Create User Settings file:
'<UserSettings>
    <ApplicationIdentity version="9.0"/>
    <ToolsOptions/>
    <Category name="Environment_Group" RegisteredName="Environment_Group">
        <Category name="Environment_ExternalTools" Category="{E8FAE9E8-FBA2-4474-B134-AB0FFCFB291D}" Package="{DA9FB551-C724-11d0-AE1F-00A0C90FFFC3}" RegisteredName="Environment_ExternalTools" PackageName="Visual Studio Environment Package">
            <PropertyValue name="Launch Powershell.Command">powershell.exe</PropertyValue>
            <PropertyValue name="Launch Powershell.Arguments">"&amp; ''$(ProjectDir)\Myscript.ps1''"</PropertyValue>
            <PropertyValue name="Launch Powershell.InitialDirectory">"$(ProjectDir)"</PropertyValue>
            <PropertyValue name="Launch Powershell.SourceKeyName"/>
            <PropertyValue name="Launch Powershell.UseOutputWindow">true</PropertyValue>
            <PropertyValue name="Launch Powershell.PromptForArguments">false</PropertyValue>
            <PropertyValue name="Launch Powershell.CloseOnExit">true</PropertyValue>
            <PropertyValue name="Launch Powershell.IsGUIapp">false</PropertyValue>
            <PropertyValue name="Launch Powershell.SaveAllDocs">true</PropertyValue>
            <PropertyValue name="Launch Powershell.UseTaskList">false</PropertyValue>
            <PropertyValue name="Launch Powershell.Unicode">false</PropertyValue>
            <PropertyValue name="Launch Powershell.Package">{00000000-0000-0000-0000-000000000000}</PropertyValue>
            <PropertyValue name="Launch Powershell.NameID">0</PropertyValue>
            <PropertyValue name="ToolNames">Launch Powershell</PropertyValue>
        </Category>
    </Category>
</UserSettings>' >> $fileName


# Perform the import of the custom tool
$project.DTE.ExecuteCommand("Tools.ImportandExportSettings", "/import:""$fileName""");

"--Remove file"
Remove-Item -path $fileName