Javascript 如何使用kartograph.js？_Javascript_Python_Svg_Kartograph

Javascript 如何使用kartograph.js？

javascript python svg

Javascript 如何使用kartograph.js？,javascript,python,svg,kartograph,Javascript,Python,Svg,Kartograph,是否有人使用过kartograph.js和“kartograph.py”库？您知道我是否需要“kartograph.py”才能运行吗？在不安装python的情况下，如何使用库“kartograph.py”？因为我在“kartograph.js”中构建“BBOX”时遇到了“kartograph.js”问题 kartograph.js中的错误： .... if (height === 0) height = width * .5; alert(width); me

是否有人使用过kartograph.js和“kartograph.py”库？您知道我是否需要“kartograph.py”才能运行吗？在不安装python的情况下，如何使用库“kartograph.py”？因为我在“kartograph.js”中构建“BBOX”时遇到了“kartograph.js”问题

kartograph.js中的错误：

.... 
if (height === 0) height = width * .5;
        alert(width);
        me.viewport = new kartograph.BBox(0, 0, width, height);
**Uncaught TypeError: undefined is not a function**
        me.paper = me.createSVGLayer();
        me.markers = [];
        me.pathById = {};
        me.container.addClass('kartograph');
    }
....

谢谢你的帮助

HTML页面。错误发生在我构建$K.map时

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>GEOFRANCE</title>
    <link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/script/js/script.min.js"></script>

您需要生成将与kartograph.py一起使用的映射，因此这直接回答了您的下一个问题，是的，您需要安装Python才能使用它。没有Python解释器，您无法运行用Python编写的东西

我不确定你是从哪里读到关于BBox方法的，但是医生说的有些不同：

谢谢。所以，如果我想在我的网站上使用kartograph，我需要在我的服务器上使用Python解释器？不，根据文档，您只需要使用.py生成一个映射。一旦生成，您就可以自由地在生成的映射中使用.js。所以我不明白。我正在使用kartograph.py生成的SVG映射。BBox方法在kartograph.js中使用，在BBox方法上我有一个错误，你能做一个小的jsfiddle吗？或者可能再粘贴一些代码和你得到的错误？我有一个问题：map=$K.map'map'，w，w；

  $script(['/script/js/jquery.min.js','/script/js/raphael.min.js', '/script/js/kartograph.js', '/script/js/chroma.min.js'], 'kartograph');

  $script(['/script/js/jquery.qtip.min.js'], 'qtip');

</head>
<body>
<div id="main">

<link rel="stylesheet" type="text/css" href="/Styles/jquery.qtip.css">    
<script type="text/javascript">

$script.ready(['kartograph', 'qtip'], function () {

    $(function () {
        var map,
            colorscale,
            dep_data = {},
            w = $('#map').parent().width();
        $.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
        $.fn.qtip.defaults.style.def = false;

        $.ajax({
            url: 'departments.json',
            dataType: 'json',
            success: function (data) {
                alert("test : " + w);

                $.each(data, function (i, r) {
                    dep_data[r.id] = r;

                })


                map = $K.map('#map', w, w);

                alert("test2 : " +w);
                map.loadMap('france-departments.svg', function () {
                    map.addLayer('departments', {
                        titles: function (d) { return d.id },
                        styles: {
                            stroke: '0.5px'
                        },
                        tooltips: function (d) {
                            return [d.name, dep_data[d.id].density + '/km<sup>2</sup>'];
                        }
                    });
                    updateMap();
                });
            }
        });

        /*
        * update map colors
        */
        function updateMap() {
            var prop = 'density', // $('.measure.btn-custom').data('value'),
                scale = 'quantiles', // $('.scale.btn-custom').data('value'),
                colors = $('#colors').get(0).value;

            colorscale = new chroma.ColorScale({
                colors: chroma.brewer[colors],
                limits: chroma.limits(dep_data, scale, 7, prop)
            });
            map.getLayer('departments').style({
                fill: function (d) {
                    return colorscale.getColor(dep_data[d.id][prop]);
                }
            });

        }

        // init user interface
        $('.btn').click(function (event) {
            var tgt = $(event.target), par = tgt.parent();
            $('.btn', par).removeClass('btn-custom');
            tgt.addClass('btn-custom');
            updateMap();
        });

        $('#colors').change(updateMap);
        $('#colors').keyup(updateMap);

    });

});
</script>

<div id="map">
</div>

</div>
  </body>
 </html>