Django集成D3.js渲染搜索结果热图仅显示单条数据问题求助

核心错误原因 #

• 模板循环逻辑错误：在Django模板循环中每次都重新声明赋值myGroups和myVars数组，而非追加元素，循环结束后两个数组仅保留最后一条搜索结果
• 数据来源错误：当前热图仍在加载第三方示例CSV数据，完全没有使用后端返回的搜索结果
• 数据结构不匹配：热图需要的group/variable/value三个核心字段，没有和你实际的业务字段做对应

修正后的代码 #

views.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',{})

search_result.html 完整JS部分替换 #

把你原有<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 + ")");

// 先初始化空数组，循环追加数据
var myGroups = []
var myVars = []
var heatmapData = []
{% for Bindll in tarname %}
    myGroups.push("{{ Bindll|escapejs }}")
    myVars.push("{{ Bindll.ki_nm|escapejs }}")
    // 构造热图需要的字段，这里value用ki_nm数值，你可以换成ic50_nm等其他字段
    heatmapData.push({
        group: "{{ Bindll|escapejs }}",
        variable: "{{ Bindll.ki_nm|escapejs }}",
        value: parseFloat("{{ Bindll.ki_nm|escapejs }}")
    })
{% endfor %}

// 坐标轴去重，避免重复显示相同值
myGroups = [...new Set(myGroups)]
myVars = [...new Set(myVars)]

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));

// 值域根据你实际ki_nm的范围调整，这里默认用1到最大值
var maxValue = d3.max(heatmapData, d => d.value)
var myColor = d3.scaleLinear()
  .range(["white", "#69b3a2"])
  .domain([1, maxValue])

// 直接用本地构造的heatmapData渲染
svg.selectAll()
    .data(heatmapData, 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)} )

额外说明 #

• 如果需要把热图的值换成ic50_nm/kd_nm等其他字段，直接修改heatmapData里的value赋值即可
• 如果数值范围异常，可以手动调整myColor的domain参数，比如你字段最大值是200就改成[1,200]
• 代码中加了escapejs过滤器，避免特殊字符导致JS语法错误

内容的提问来源于stack exchange，提问作者Ab6578