jQuery MapSvg绑定数据到区域参数

Question

在我的MVC应用程序中，我试图使用来自数据库的数据创建SVG地图。使用jQuery，我在控制器中调用一个操作，该操作以MapSvg区域参数中所期望的格式返回数据。

预期的格式如下：

regions :       {
              'Yemen': {disabled: true},
              'USA':   {tooltip: 'USA: Click to go to Google.com', attr: {fill: '#ff0000', href: 'http://google.com', 'cursor': 'help'}}},
              'France': {tooltip: 'This is France!', attr: {'cursor': 'help'}},
              'Kazakhstan': {tooltip: 'Kazakhstan  - the ninth largest country in the world.'}
            },

在我的控制器中，有一个操作将由jQuery ajax请求在视图中调用。

    public ActionResult GetCountries()
    {           
            List<ScratchMap> allitems = this.Worker.GetAllItems();
            var allItemsAsArray = allitems.Select(x => string.Format("'{0}': {{ tooltip: 'Test', attr: {{ fill: '{1}' }} }}", x.PluginCountryName, x.Color)).ToArray();
            return Json(allItemsAsArray, JsonRequestBehavior.AllowGet);

    }

在视图中，在加载jQuery插件和MapSvg插件之后执行以下代码：

$.get('/ScratchMap/GetCountries', {},
        function (data) {           
            var regionsData = '{' + data + '}';         

            $('#map').mapSvg(
                {
                    source: '@Url.Content("~/Content/Maps/world_high.svg")',
                    loadingText: 'Loading map...',
                    tooltipsMode: 'names',
                    responsive: true,
                    zoom: true,
                    pan: true,
                    zoomButtons: {
                        'show': true,
                        'location': 'right'
                    },
                    regions: regionsData                            
                });
        }), 'json';

当呈现页面时，地图不会填充从数据库检索到的任何国家。但是，当我将regionsData变量的输出直接复制并分配给regions参数时，映射将正确加载所有内容。

下面的文章告诉我，这可能与输入数据类型有关。但是，如果我将regionsData解析为JSON，它会告诉我它的格式是错误的。但是MapSvg的创建者给出的例子也是错误的格式。

有谁有解决办法的办法吗？

谢谢。

Answer 1

事实证明，这与我创建javascript输出的方式有关。这个问题的答案可以在这个文章中找到。

Answer 2

问题是，即使编辑了regions变量，地图插件也不会观察其对象内容的变化，所以您必须等到数据返回后再绘制内容。或者用下面的方法重新绘制。

如果您希望等到从数据库调用返回数据时再进行绘图，您可以使用允诺来延迟对象的绘图。同样重要的是要知道OPTS变量需要的格式，这里是一个示例。

var OPTS ={ 源:源代码，//路径到SVG地图颜色：{背景：'#fff'，基：‘#0066 fff’，笔画：'#fff'，被选中: 10，禁用：'#ff0000'}，tooltipsMode：‘组合式’，缩放:真，pan:真，响应:真，宽度: 1170，zoomLimit: 0,100，onClick:函数(e，m) {//在每个地图上点击}区域：{id_of_svg_path(要为其添加数据的实际区域)：{禁用:true，/*or您需要的任何东西*/工具提示：‘某事’}}

为了重新绘制图，我使用了return对象：

选项只是你的特定图表选项。

包含区域变量的变量javascript对象。

变量chartObj = $('#chart_container').mapSvg(OPTS)；

chartObj.destroy()；

这个呼叫会破坏，然后你用你通过的选项重新绘制它。

一旦你销毁了它并传入新的数据，你就可以直接调用它了。

变量chartObj = $('#chart_container').mapSvg(OPTS)；

用新的数据重新绘制它。