Преобразование диаграмм D3 в pdf с использованием wkhtmltopdf

Question

У меня есть несколько диаграмм D3, одна базовая тепловая карта и другие, такие как пончик или гистограмма. При использовании wkhtmltopdf все круговые, кольцевые и столбчатые диаграммы будут отображаться в формате PDF, а моя тепловая карта - нет. Я не могу понять, почему нет.

Вот рабочая гистограмма (обратите внимание, я передаю данные на график через шаблон Django):

        <div id="duelChart"></div>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>   
                var data = [
                    { "name": "Stat 5", "value": {{ stat.duel_defensive_won|default:0 }}, },
                    { "name": "Stat 4", "value": {{ stat.duel_offensive_won|default:0 }}, },
                    { "name": "Stat 3", "value": {{ stat.aerial_duels_won|default:0 }}, },
                    { "name": "Stat 2", "value": {{ stat.ground_duels_won|default:0 }}, },
                    { "name": "Stat 1", "value": {{ stat.duel_won|default:0 }}, },];

                var margin = { top: 15, right: 25, bottom: 15, left: 60 };           
                var width = 400 - margin.left - margin.right,
                    height = 250 ;
                var svg = d3.select("#duelChart").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 x = d3.scale.linear()
                    .range([0, width])
                    .domain([0, d3.max(data, function (d) {
                        return d.value;
                    })]);

                var y = d3.scale.ordinal()
                    .rangeRoundBands([height, 0], .1)
                    .domain(data.map(function (d) {
                        return d.name;
                    }));

                //make y axis to show bar names
                var yAxis = d3.svg.axis()
                    .scale(y)
                    //no tick marks
                    .tickSize(0)
                    .orient("left");

                var gy = svg.append("g")
                    //.attr("class", "y axis")
                    //.call(yAxis)

                var bars = svg.selectAll(".bar")
                    .data(data)
                    .enter()
                    .append("g")

                //append rects
                bars.append("rect")
                    .attr("class", "bar")
                    .attr("y", function (d) {
                        return y(d.name);
                    })
                    .attr("height", y.rangeBand())
                    .attr("x", 0)
                    .attr("width", function (d) {
                        return x(d.value);
                    });

                //add a value label on the left of each bar
                bars.append("text")
                    .attr("class", "label")
                    //y position of the label is halfway down the bar
                    .attr("y", function (d) {
                        return y(d.name) + y.rangeBand() / 2 + 4;
                    })
                    //x position is 3 pixels to the right of the bar
                    //.attr("x", function (d) {
                    //    return x(d.value) + 3;
                    //})
                    .style('fill', 'white')
                    .text(function (d) {
                        return d.name;
                    });

            </script>

Вот неработающая (простая) Тепловая Карта:

<div id="heatMap" style="margin-left:12px"></div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
                    <script>
                        data = [];
                        {% for column in heatmap.gridData %}
                        {% for row in column %}
                        data.push({ "week": {{ forloop.counter0 }} , "day" : {{ forloop.parentloop.counter0 }}, "value": {{ row }} }, );
                        {% endfor %}
                        {% endfor %}
                        var colorDomain = d3.extent(data, function (d) {
                            return d.value;
                        });


                        var colorScale = d3.scale.linear()
                            .domain(colorDomain)
                            .range(["lightblue", "blue"]);

                        var svg = d3.select("#heatMap")
                            .append("svg")
                            .attr("width", 835)
                            .attr("height", 535)                                
                            .append("g")
                            .attr("transform", "translate(" + 0 + "," + 0 + ")");

                        var rectangles = svg.selectAll("rect")
                            .data(data)
                            .enter()
                            .append("g");

                        rectangles
                            .append('rect')
                            .attr("x", function (d) {
                                return d.day * 41;

                            })
                            .attr("y", function (d) {
                                return d.week * 41;
                            })
                            .attr("width", 42)
                            .attr("height", 41).
                            style("fill", function (d) {
                                return colorScale(d.value);
                            });    
                    </script>

Эта тепловая карта отображается точно так, как я ожидаю в окне браузера, но когда я пытаюсь отправить ее в PDF-файл, используя django-wkhtmltopdf, изображение не появляется.

пожалуйста, обратите внимание <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> на самом деле в <head> ... </head> в верхней части HTML-файла, но я включил в локальный скрипт, чтобы показать, что я включил его. Обе диаграммы вместе со многими другими находятся на одной и той же HTML-странице. Тепловая карта - единственная, которая не отображается в wkhtmltopdf.

Любая помощь, объясняющая, почему это не рендеринг (и как исправить), будет очень цениться