D3不动态选择ID

Question

让d3.select（）通过直接传递字符串来工作。

var svg = d3.select("#step-id-8").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

然而，当我尝试用变量做同样的事情时，由于某种原因它不会计算。

    console.log("#"+graphBlock.id);   //Yields = #step-id-8 
    var svg = d3.select("#"+graphBlock.id).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

此代码使用bootstrap，django和d3。主要添加两个字符串“＃”+ graphBlock.id将产生正确的字符串“＃step-id-8”，同时循环从我的列表中拉出django。

“＃步骤-ID-8” “＃步骤-ID-9” “＃步骤-ID-10” 等等......

但由于某种原因，它无法在d3.select下工作（“＃”+ graphBlock.id）

以下是代码的完整版本：

<div class="container">
    <div class="row">
        <div class="col-lg-3" style=>
            <div class="row">
                <h4> Please select a Checklist</h4>
            </div>

            {% for cl in checklist %}
            <div class="row" name="checklistId-{{cl.id}}" value={{cl.id}}>
                {{ cl.name}}            
            </div>
            {% endfor %}            
        </div><!-- first column -->

        <div class="col-lg-9" >

            <div class="row" id="graphArea">

            </div> <!-- row, graph -->

        </div>

    </div><!-- row -->
</div><!--container -->





<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

function httpGet(theUrl)
{
    var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false );
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

var checklistTempalteId = 3;            //testingValue
jsonData = JSON.parse(httpGet("/getLogData/"+checklistTempalteId));

function graphData(jsonData) {
    //Cycle through each chart to be graphed
    for (i in jsonData['logData']){
        var stepBlock = document.createElement("div");
        stepBlock.className = "col-md-12";

        var titleRow = document.createElement("div");
        titleRow.className = "row";

        var stepTitle = document.createElement("h4");
        stepTitle.innerHTML = jsonData['logData'][i].name;

        titleRow.appendChild(stepTitle);
        stepBlock.appendChild(titleRow);


        //Graph Block
        var graphBlock = document.createElement("div");
        graphBlock.className = "col-md-12";
        graphBlock.id = "step-id-"+jsonData['logData'][i]['templateStepId'];

        //Graph it
        var data = jsonData['logData'][i]['chartData'];

        var margin = {top: 20, right: 20, bottom: 30, left: 40},
            width = 600 - margin.left - margin.right,
            height = 200 - margin.top - margin.bottom;

        var x = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1);

        var y = d3.scale.linear()
            .range([height, 0]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");


        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(1);

        var a = "#"+graphBlock.id
        //console.log(String(a));   //Yields = #step-id-8 

        /* MAJOR PROBLEM ###################*/
        var svg = d3.select("#step-id-8").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        x.domain(data.map(function(d) { return d.modifyTime; }));
        y.domain([0, d3.max(data, function(d) { return d.value; })]);

        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

        svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("True");

        svg.selectAll(".bar")
          .data(data)
        .enter().append("rect")
          .attr("class", "bar")
          .attr("x", function(d) { return (d.counter*50); })
          .attr("width", 45)
          .attr("y", function(d) { return y(d.value); })
          .attr("height", function(d) { return height - y(d.value); })

        function type(d) {
          d.frequency = +d.frequency;
          return d;
        }

        //Graph End
        document.getElementById("graphArea").appendChild(stepBlock);
        document.getElementById("graphArea").appendChild(graphBlock);
    }
}


graphData(jsonData);
</script>