Question

在我的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';

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

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

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

感谢。

Answer 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 = $（＆＃39; #chart_container＆＃39;）。mapSvg（OPTS）;

chartObj.destroy（）;
此调用将销毁然后您使用已传入的OPTS重新绘制它。

一旦你销毁它并传入新数据，你就可以打电话。
var chartObj = $（＆＃39; #chart_container＆＃39;）。mapSvg（OPTS）;

使用新数据重新绘制图表。

Answer 2

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

jQuery MapSvg将数据绑定到regions参数

2 个答案: