Demography graph with text marks?

[knutwannheden]

I am trying to render a classical demography mark using Plot.barX() with Plot.stackX2() (somewhat similar to https://observablehq.com/@observablehq/plot-stack?collection=@observablehq/plot#cell-521). Now I would also like text marks to display the actual values.

I was able to get the text mark to show, but since I have bars going "left" and "right", the text is always inside the bar on one side and outside of the bar on the opposite side. I was hoping that I would be able to specify the value for textAnchor (or frameAnchor) using a function, in which case I would have been able to get it to work, but that doesn't seem to be work. Same thing goes for dx. The only thing I got working was when I "manually" added an offset to the x property. I am just unsure if it is expected that I cannot define textAnchor and dx as a function (something like dx: d => ...) just like I can with most other properties.

Plot.plot({
  x: {
    grid: true,
    label: "← Unbezahlt · Bezahlt →",
    labelAnchor: "center",
    tickFormat: Math.abs,
    nice: true
  },
  marks: [
    Plot.barX(source, Plot.stackX2({
      x: d => d.bezahlt == 'ja' ? d.anzahl : -d.anzahl,
      y: "partei",
      sort: {y: "x", reverse: true},
      fill: "bezahlt",
      title: d => `anzahl: ${d.anzahl}`
    })),
    Plot.text(source, {
      x: d => d.bezahlt == 'ja' ? d.anzahl + 10 : -d.anzahl - 10,
      y: "partei", text: "anzahl",
      // textAnchor: 'end',
    }),
    Plot.ruleX([0])
  ],
  color: {
    type: "categorical",
    domain: ['nein', 'ja'],
  },
  marginLeft: 50,
})

This is the result I was trying to obtain (which also works by manually adding the offset in the x computation):

[mbostock]

You can specify two text marks with separate options. Then apply a filter to one for the left values, and an opposite filter for the right values.