Tengo este pequeño gráfico que representa un determinado conjunto de datos. Como puede ver en el fragmento de código, las etiquetas de texto se muestran actualmente en el mismo color que los componentes del gráfico circular y, por lo tanto, son invisibles cuando se ubican dentro del gráfico circular (puede ver esto si cambia
mark: {type: "text", radius: 70},a
mark: {type: "text", radius: 120},ya que las etiquetas de texto estarán fuera del área del arco del gráfico circular. Como quiero que las etiquetas de texto aparezcan dentro de los arcos, me gustaría que fueran en blanco o negro. ¿Alguien sabe cómo puedo lograr eso?
vegaEmbed("#graph", { $schema: "https://vega.github.io/schema/vega-lite/v5.json", data: { values: [{ event: "a", occurances: 28, }, { event: "b", occurances: 3, }, { event: "c", occurances: 1, }, { event: "d", occurances: 3, }, { event: "e", occurances: 1, }, { event: "f", occurances: 10, }, { event: "g", occurances: 2, }, { event: "h", occurances: 1, }, { event: "k", occurances: 1, }, ], }, layer: [{ mark: { type: "arc", innerRadius: 50, outerRadius: 100 }, }, { mark: { type: "text", radius: 70 }, encoding: { text: { field: "occurances", type: "quantitive" }, }, }, ], mark: { type: "arc", innerRadius: 50, outerRadius: 100 }, encoding: { color: { field: "event", type: "nominal", }, theta: { field: "occurances", type: "quantitative", stack: true, }, }, }); <script src="https://cdn.jsdelivr.net/npm/vega@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> <div id="graph"></div>Lleve toda la codificación al exterior para que sea común para ambas capas y proporcione text de marca de fill para aplicar algo de color.
Consulte el siguiente código o enlace del editor :
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": { "values": [ {"event": "a", "occurances": 28}, {"event": "b", "occurances": 3}, {"event": "c", "occurances": 1}, {"event": "d", "occurances": 3}, {"event": "e", "occurances": 1}, {"event": "f", "occurances": 10}, {"event": "g", "occurances": 2}, {"event": "h", "occurances": 1}, {"event": "k", "occurances": 1} ] }, "encoding": { "color": {"field": "event", "type": "nominal"}, "theta": {"field": "occurances", "type": "quantitative", "stack": true} }, "layer": [ {"mark": {"type": "arc", "innerRadius": 50, "outerRadius": 100}}, { "mark": {"type": "text", "radius": 70, "fill": "black"}, "encoding": {"text": {"field": "occurances", "type": "quantitative"}} } ] }