Django熱圖d3.js傳遞搜索回傳的資料

我正在創建一個可搜索的存盤庫，在 django (windows) 和 postgresql 中完成搜索后顯示熱圖。我的搜索代碼不用于 HTML。

視圖.py

def search_result(request):
    if request.method == "POST":
        ChemSearched = request.POST.get('ChemSearched')
        tarname = Bindll.objects.filter(targetnameassignedbycuratorordatasource__contains=ChemSearched)[:10]

        return render(request, 'Search/search_result.html',
            {'ChemSearched':ChemSearched,'tarname':tarname})
    else:
        return render(request, 'Search/search_result.html',{})

搜索結果.html

...

                <br/><br/><br/><br/>
        <strong><h1>{% if ChemSearched %}
            <script>


            var margin = {top: 30, right: 30, bottom: 30, left: 30},
              width = 450 - margin.left - margin.right,
              height = 450 - margin.top - margin.bottom;


            var svg = d3.select("#my_dataviz")
            .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   ")");
             {% for Bindll in tarname %}


                var myGroups = [  "{{ Bindll }}"  ]
                var myVars = [  "{{ Bindll.ki_nm }}"  ]
             {% endfor %}
               


            var x = d3.scaleBand()
              .range([ 0, width ])
              .domain(myGroups)
              .padding(0.01);
            svg.append("g")
              .attr("transform", "translate(0,"   height   ")")
              .call(d3.axisBottom(x))


            var y = d3.scaleBand()
              .range([ height, 0 ])
              .domain(myVars)
              .padding(0.01);
            svg.append("g")
              .call(d3.axisLeft(y));


            var myColor = d3.scaleLinear()
              .range(["white", "#69b3a2"])
              .domain([1,100])


            d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) {

              svg.selectAll()
                  .data(data, function(d) {return d.group ':' d.variable;})
                  .enter()
                  .append("rect")
                  .attr("x", function(d) { return x(d.group) })
                  .attr("y", function(d) { return y(d.variable) })
                  .attr("width", x.bandwidth() )
                  .attr("height", y.bandwidth() )
                  .style("fill", function(d) { return myColor(d.value)} )

            })

        </script>                   
                        <br>
                        {% for Bindll in tarname %}
                            {{ Bindll }}--{{ Bindll.ki_nm }}-{{ Bindll.ic50_nm }} - {{ Bindll.kd_nm  }} - {{ Bindll.ec50_nm }} - <br>

                        {% endfor %}

                    {% else %}
                                <strong>No Entry</strong>
                        
                {% endif %}

以前從未使用過網路，所以任何幫助為什么圖表只顯示一個元素，嘗試使用 for 回圈將值附加到串列中沒有奏效，但它的列印結果很好，您可以通過任何方式指導我做錯了什么，使熱圖顯示我的結果。謝謝

uj5u.com熱心網友回復：

你能不能用這種方式構建你的規模域，看看它是否有效。除了域中的可能錯誤之外，我沒有看到直接的問題：

var myGroups= data.map(d=>d.group).filter((item, i, ar) => ar.indexOf(item) === i),
    myVars = data.map(d=>d.variable).filter((item, i, ar) => ar.indexOf(item) === i);

標籤：姜戈 PostgreSQL的 d3.js 搜索 存储库

上一篇：Django：Urls可選查詢引數

下一篇：如何在djngo中使用“pdfkit”？