gpt4 book ai didi

javascript - 度量图形图表中的样式轴标签

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:43:31 24 4
gpt4 key购买 nike

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

我的代码:

 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 或更好的图表选项来解决这个问题?

最佳答案

使用 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","re​​d");) 将标记设为红色。
  • 但在您的情况下,svg 位于 iframe 中,由于同源策略,您无法访问它

关于javascript - 度量图形图表中的样式轴标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28443681/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com