Question

我认为这是一个简单的JS问题，因为我是新手。

我根据Scott Murray的例子使用d3创建了一个条形图。

我希望用户使用输入id =“cp”选择条形图的颜色。为此，我使用jscolor，这是正常的。当用户选择颜色时，我将颜色强度硬编码为0.8（minS：0.8），并设置其他三个输入（类型：颜色）。

我想将这三个输入设置为与“cp”相同的颜色，但强度降低（0.6,0.4和0.2）。这样我的条形图可以按类别为其数据着色。

它在页面加载时工作正常：

<body onload="updateInfo('#3356FF')">

这很好用。它调用这个js函数：

function updateInfo(color) {

    var colA = "";

    svg.selectAll("rect")
        .attr("fill", color);

     if (typeof(color) === 'string' ) { 

        colA = color;

    } else {

        colA = String(color);
        colA = colA.toUpperCase();
        colA = "#" + colA;

    }


    var cpB = document.getElementById('cpB');
    cpB.value = colA;

    var cpC = document.getElementById('cpC');
    cpC.value = colA;

    var cpD = document.getElementById('cpD');
    cpD.value = colA;

}

根据预期，这会使所有条纹的颜色变为蓝色，强度逐渐降低。这是带输入的html。你可以看到顶部输入（id ='cp'）调用一个函数updateInfo（this）。 “this”发送的对象不是字符串，因此您可以看到上面的函数将其转换回字符串的原因。

<div class="col1">

    <input size="1px" id="cp" class="color {minS:0.8, onImmediateChange:'updateInfo(this);', pickerFace:20, slider:false, pickerFaceColor:'transparent', pickerFace:3, pickerBorder:0, pickerInsetColor:'white'}"  >
    <input class="cp_txt" value="Cat A" disabled>

    <input size="1px" id="cpB" class="color {maxS:0.6} cp_child" disabled >
    <input class="cp_txt" value="Cat B" disabled>

    <input size="1px" id="cpC" class="color {maxS:0.4} cp_child" disabled >     
    <input class="cp_txt" value="Cat C" disabled>

    <input size="1px" id="cpD" class="color {maxS:0.2} cp_child" disabled >
    <input class="cp_txt" value="Cat D" disabled>


</div>

我已经使用警报进行了检查，即使html输入显示颜色没有变化，代码也会一直运行到函数末尾。我很困惑，因为它第一次工作，新的颜色代码是一个7个字母的字符串，大写字母哈希...

有人可以帮忙吗？

----用jsfiddle ----

更新

http://jsfiddle.net/dKyDY/1/

jsfiddle示例给我的网页编辑器（coda2）提供了不同的结果 - 我认为这可能有助于识别问题。每次将对象而不是字符串传递给函数updateInfo作为参数时，Jsfiddle就会抛出一个问题。

如何填充多个输入（类型：颜色）

0 个答案: