Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/367.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在数据地图中创建垂直图例_Javascript_D3.js_Legend_Datamaps - Fatal编程技术网

Javascript 在数据地图中创建垂直图例

Javascript 在数据地图中创建垂直图例,javascript,d3.js,legend,datamaps,Javascript,D3.js,Legend,Datamaps,我正在制作一个choropleth,但在修改图例时遇到了问题。我想让图例垂直于地图右侧。文件中不清楚如何做到这一点。如何创建堆叠/垂直图例 我使用以下代码创建图例: var legend_params = { legendTitle: "Some Test Data", }; map.legend(legend_params); 下面是试图修改它的css: .datamaps { position: relative; display: inline-block; text-a

我正在制作一个choropleth,但在修改图例时遇到了问题。我想让图例垂直于地图右侧。文件中不清楚如何做到这一点。如何创建堆叠/垂直图例

我使用以下代码创建图例:

var legend_params = {
  legendTitle: "Some Test Data",
};
map.legend(legend_params);
下面是试图修改它的css:

.datamaps {
  position: relative;
  display: inline-block;
  text-align: center;
}

.datamaps-legend {
    color: white;
    right: -100px;
    top: 0;
    position: relative;
    display: inline-block;
    text-align: center;
 }

.datamaps-legend dl {
  text-align: center;
  display: inline-block;
  position: static;
}

我认为数据地图中没有水平图例选项。我将其用于一个项目,并最终重写了图例函数,使其满足要求。我能够使用CSS将图例堆叠/垂直放置在地图右侧。颜色和值没有对齐。如果这些值是静态的,您可以通过针对特定的dt/dd(:nth child或:nth type)元素并根据需要添加填充来排列它们。如果这些值是动态的,则需要更聪明的解决方案。我为.datamaps图例dt添加了css,并修改了.datamaps图例的顶部。举例


@马尔科的想法?
.datamaps-legend dt{
  clear:both;
}
.datamaps-legend {
    color: white;
    right: -100px;
    top: 128px;
    position: relative;
    display: inline-block;
    text-align: center;
 }