jQuery MapSvg 将数据绑定到区域参数答案

【问题标题】：jQuery MapSvg binding data to regions parameterjQuery MapSvg 将数据绑定到区域参数
【发布时间】：2015-01-13 18:27:48
【问题描述】：

在我的 MVC 应用程序中，我正在尝试使用来自数据库的数据创建一个 SVG Map。使用 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);

    }

在View中，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';

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

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

有人对解决方法有任何想法吗？

谢谢。

【问题讨论】：

标签： javascript jquery ajax json svg

【解决方案1】：

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

如果您希望等到数据从数据库调用返回后才绘制图形，您可以使用 promise 来延迟对象的绘制。同样重要的是要知道 OPTS 变量需要采用的格式，这是一个示例。

var OPTS = {

  source: sourcepath,    // Path to SVG map
  colors: {background: '#fff',base: '#0066FF', stroke: '#fff', selected: 10, disabled: '#ff0000'},
  tooltipsMode: 'combined',
  zoom: true,
  pan: true,
  responsive: true,
  width: 1170,
  zoomLimit: [0,100], 
  onClick: function (e, m) {
    //do something here on each map click
  },
  regions:{
     id_of_svg_path(the actual region you want to add data for):{
       disabled:true,/*or whatever you need*/
       tooltip:'<h4>Something to say</h4>'
     }
  }

}

为了重新绘制图形，我使用了返回对象：

OPTS 只是您的特定图表选项。
一个包含区域变量的变量 javascript 对象。
var chartObj = $('#chart_container').mapSvg(OPTS);

chartObj.destroy();
这个调用会破坏然后你用你传入的 OPTS 重新绘制它。

一旦你销毁它并传入新数据，你就可以调用了。
var chartObj = $('#chart_container').mapSvg(OPTS);

用新数据重新绘制它。

【讨论】：

我对您建议的解决方案有疑问。我已经研究过这个问题，我注意到我构造区域变量的方式存在问题。正如您在我的问题中看到的那样，变量的声明式创建会生成一个对象列表，而来自 AJAX 调用的数据只是一个 JSON 字符串。我需要弄清楚如何创建相同类型的 javascript 变量。

【解决方案2】：

事实证明这是我创建 javascript 输出的方式的问题。这个问题的答案可以在这个article找到。

【讨论】：