在metricgraphics图表中设置轴标签的样式答案

【问题标题】：styling axis labels in a metricsgraphics chart在metricgraphics图表中设置轴标签的样式
【发布时间】：2015-02-10 23:11:19
【问题描述】：

我创建了一个metricgraphics图表并尝试增加轴标签的字体大小：http://jsfiddle.net/hk63jfg3/1/

我的js：

 MG.data_graphic({
    title: "sightings",
    data: [{
        'date': new Date('2014-10-28'),
        'value': 7
    }, {
        'date': new Date('2014-11-01'),
        'value': 12
    }, {
        'date': new Date('2014-11-02'),
        'value': 18
    }],
    width: 400,
    height: 250,
    target: '#sightings',
    x_accessor: 'date',
    y_accessor: 'value',
});

和 CSS：

.mg-x-axis text, .mg-y-axis text, .mg-histogram .axis text {
    font-size: 1.5rem;
}

年份和月份有冲突，有没有办法通过 CSS 或更好的图表选项来解决这个问题？

【问题讨论】：

标签： javascript css metricsgraphicsjs

【解决方案1】：

使用 CSS

您可以使用transform: translate(x,y) 定位年份标记。
您可以使用in the W3C specification 列出的所有属性设置文本样式，例如加粗或改变颜色：
```
text {
    font-weight: bold;
    fill: rebeccapurple;
    font-size: 30px;
}
```
如果年份标记与月份标记发生冲突，则使用translate(0,10px) 将它们分开，并通过以下方式使年份标记可见：
```
svg {
    overflow: visible !important;
}
```

$(function () {
    MG.data_graphic({
        title: "sightings",
        data: [{
            'date': new Date('2014-10-28'),
            'value': 7
        }, {
            'date': new Date('2014-11-01'),
            'value': 12
        }, {
            'date': new Date('2014-11-02'),
            'value': 18
        }],
        width: 400,
        height: 250,
        target: '#sightings',
        x_accessor: 'date',
        y_accessor: 'value',
    });
});
$(".mg-year-marker text").attr("fill", "red");

.mg-x-axis text, .mg-y-axis text, .mg-histogram .axis text {
    font-size: 1.5rem;
}



svg {
    overflow: visible !important;
    height: 300px;
}

g.mg-year-marker {
     transform: translate(100px, 15px);
}

g.mg-year-marker text {
    font-size: 2rem;
    fill: rebeccapurple;
    font-weight: bold;
}

<link href="http://metricsgraphicsjs.org/css/metricsgraphics.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://metricsgraphicsjs.org/js/metricsgraphics.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
    <div id='sightings'></div>
</body>

使用 Javascript

您始终可以使用 document.getElementById("my-svg-id").contentDocument 获取 SVG 元素的内部 DOM，并通过设置其属性来操作文本元素。
例如。在 svg-dom 中使用 setAttribute("fill","red");) 将标记变为红色。
但在您的情况下，svg 位于 iframe 中，由于同源策略，您无法访问该 iframe。

【讨论】：